週末閒來無事，瞭解了下html5動畫製作的一些基本流程，寫了個小例子。
記錄下來，
html代碼。在最後測試了下Kinetic.js。 下載地址 http://kineticjs.com Download source。
<html>
<head>Arsenal Transfer Info</head>
<body>
<div id="bottomDiv"></div>
<img id = "imgId"></img>
<div>
<canvas width="1000" height="600" id="draw"></canvas>
</div>
<script src="kinetic-v4.5.4.min.js"></script>
<script defer="defer" src="ars.js"></script>
</body>
</html>Javascript腳本。
(function(){
var gCanvas = document.getElementById("draw");
//-------------------BASE INFO-----------------------------------
var BaseInfo = function(){};
BaseInfo.prototype.initialize = function()
{
var d = document;
var c = d.createElement("div"); //container
c.id = "container";
c.innerHTML = "兵工廠信息";
var b = d.getElementById("bottomDiv");
d.body.insertBefore(c, b);
}
BaseInfo.prototype.updateInfo = function()
{
var img = document.getElementById("imgId");
img.src = "20130727133710.png";
}
BaseInfo.prototype.run = function()
{
this.initialize();
this.updateInfo();
}
//---------------------TOOL---------------------------------
//point
var Point = {x:0, y:0};
Point.p = function($x, $y)
{
return {x:$x, y:$y};
}
//Size
var Size = {width:0, height:0};
Size.s = function(w, h)
{
return {width:w, height:h};
}
var DrawUtil = function(){};
//draw line
DrawUtil.drawLine = function (canvas, startPoint, endPoint, lineColor, lineSize)
{
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.lineTo(endPoint.x, endPoint.y);
ctx.lineWidth = lineSize;
ctx.strokeStyle = lineColor;
ctx.stroke();
}
//draw rectangle
DrawUtil.drawRect = function(canvas, point, size, color)
{
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(point.x, point.y, size.width, size.height);
}
//draw image
DrawUtil.drawImageTo = function(canvas, img, point)
{
var ctx = canvas.getContext("2d");
ctx.drawImage(img, point.x, point.y);
}
//clear
DrawUtil.clear = function(canvas)
{
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//--------------------SCHEDULE-------------------------------
//獲取單例
var schedule = (function(){
var scheduleinstance;
function createInstance() {
var object = new Object("I am the instance");
return object;
}
return {
getInstance: function () {
if (!scheduleinstance) {
scheduleinstance = createInstance();
}
return scheduleinstance;
}
};
})();
var schedulePool = null;
//初始化
schedule.getInstance.init = function()
{
schedulePool = [];
}
//@public 開始
schedule.getInstance.start = function()
{
setInterval(this.run, 100);
}
//@public 添加
schedule.getInstance.runTarget = function(target)
{
schedulePool.push(target);
}
//@privare run
schedule.getInstance.run = function()
{
DrawUtil.clear(document.getElementById("draw"));
var len = schedulePool.length;
for(var i = 0; i < len; i++)
{
schedulePool[i].update();
}
}
//@public 移除
schedule.getInstance.removeTarget = function(target)
{
if(target)
{
var i = schedulePool.indexOf(target);
if(i != -1)
{
schedulePool.splice(i, 1);
}
}
}
//----------------------Sprite------------------------------
var Sprite = function(){
this.ssX = 0;
this.ssY = 0;
var startX = 0;
var startY = 0;
};
Sprite.prototype.update = function()
{
this.ssX = this.ssX + 10;
this.ssY = this.ssY + 10;
// this.startX = this.startX + 1;
// this.startY = this.startY + 4;
DrawUtil.drawLine(document.getElementById("draw"), Point.p(this.startX, this.startY), Point.p(this.ssX, this.ssY), "FF0000", 1);
if(this.ssX > 1000)
{
this.ssX = 0;
}
if(this.ssY > 600)
{
this.ssY = 0;
}
}
Sprite.prototype.setPath = function($x, $y)
{
this.startX = $x;
this.startY = $y;
}
//=====================RUN==================================
schedule.getInstance.init();
schedule.getInstance.start();
/*************************Base Info Test**********************
var canvas = document.getElementById("draw");
var base = new BaseInfo();
base.run();
DrawUtil.drawLine(canvas, Point.p(10, 20), Point.p(1000, 1000), "FF0000", 1);
DrawUtil.drawRect(canvas, Point.p(20,60), Size.s(200,200), "#FF1111");
var m = new Image();
m.onload = function(){
DrawUtil.drawImageTo(canvas, m, Point.p(10,10));
}
m.src = "20130727133710.png";
canvas.addEventListener("click", function(){ DrawUtil.clear(canvas);});
****/
/**********************Sprite Schedule Test*******************************
var role = new Sprite();
schedule.getInstance.runTarget(role);
role.setPath(100, 100);
var role2 = new Sprite();
schedule.getInstance.runTarget(role2);
role2.setPath(100, 70);
var role3 = new Sprite();
schedule.getInstance.runTarget(role3);
role3.setPath(100, 130);
var role4 = new Sprite();
schedule.getInstance.runTarget(role4);
role4.setPath(100, 170);
gCanvas.addEventListener("click", function(){ schedule.getInstance.removeTarget(role3); });
*/
var stage = new Kinetic.Stage({container:'bottomDiv',width:1000,height:600});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Rect({
x:239,
y:75,
width:100,
height:50,
fill:'green',
stroke:'black',
strokeWidth:4
});
var img = new Image();
img.onload = function()
{
var yogo = new Kinetic.Image({x:10,y:10,image:img});
layer.add(yogo);
layer.add(shape);
stage.add(layer);
}
img.src = "20130727133710.png";
})();