[HTML5]模仿Flash的帧式动画2[实例]笔触轨迹

quasiceo 2014-12-13

展开全文

分类：学习笔记

模仿Flash帧式内容来源于上篇Blog，对部分内容作了修改。运行起来后的效果还是很不错的，还有时间的话打算模仿成http://soytuaire./这么炫的格式~不过有难度哦，加油就好了

第一个文件spirit.js

var Sprite = function(speed) {
this.speed = speed;
};
Sprite.prototype = {

draw : function() {

},

move : function() {
  this.x += this.speed.x;
  this.y += this.speed.y;

  if (this.childs != null && this.childs.length > 0) {
   for ( var i = 0; i < this.childs.length; i++) {
    this.childs[i].speed = this.speed;
    this.childs[i].move();
   }
  }
},

a : function(sprite) {
  if (this.childs == null)
   this.childs = [];
  this.childs.push(sprite);
},

drawChild : function() {
  if (this.childs != null && this.childs.length > 0) {
   for ( var i = 0; i < this.childs.length; i++) {
    this.childs[i].draw();
   }
  }
}
};

var XCircle = function(ctx, x, y, radius, speed, config) {

this.ctx = ctx;
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
this.config = {
strokeStyle : "#000",
lineWidth : "1"
};
// M.dom.mixin(this.config, config);
};
XCircle.prototype = new Sprite(this.speed);

XCircle.prototype.draw = function() {
this.ctx.beginPath();
this.ctx.lineWidth = this.config.lineWidth;
this.ctx.strokeStyle = this.config.strokeStyle;
this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
// this.ctx.stroke();
this.ctx.fill();
this.drawChild();
};

第二个文件 ex_canvas.htm

<!DOCTYPE html>
<html>
<head>
<script src="spirit.js"></script>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>

<canvas id="myCanvas" style="border:1px solid #c3c3c3;" width="800"
height="600" onmousemove="followMouse(event)">
Your browser does not support the canvas element.
</canvas>

var can = new Canvas();
can.ctx = ctx;
can.begin();//开始渲染
setInterval(function() {
  for ( var i in can.sprites) {
   if (typeof (can.sprites[i]) == "function")
    continue;
   can.sprites[i].move()
  }

}, 30);

var i = 0;
var Speed = {
  x : 1,
  y : 1
};
var circle = new XCircle(ctx, -10, -10, 10, {
  x : 0,
  y : 0
});

can.addSprite(i, circle);
function followMouse(e) {
circle.x = e.clientX - 5;
circle.y = e.clientY - 5;
}

setTimeout("poo()", 10);

function poo() {
  if (i >= 200)
   i = 0;
  i++;
  Speed.x = 20 - (circle.x)/100;
  Speed.y = (300 - circle.y) / 40;
  var c = new XCircle(ctx, circle.x, circle.y, 5 + Math.random() * 10,
    Speed);
  can.addSprite(i, c);