你的位置:首页 > 网页设计

[网页设计]canvas学习之制作动画


html部分

......<body><canvas id="myCanvas" width="400" height="400" ></canvas><!-- 给动画添加控制按钮 --><div>	<button id="startAnimation">Start</button>	<button id="stopAnimation">Stop</button></div>......

制作动画
1. 创建动画循环
之所以称为循环,是因为它在重复发生。
动画循环三要素:
1)更新需要绘制的对象(如移动对象的位置)
2)清除画布
3)在画布上重新绘制对象
注意:在清除对象之前不要绘制对象,否则看不到任何对象!
实例:

2.更新、清除、绘制

一个简单的例子:建立一个简单的动画,使一个正方形每帧向右移动1像素,单击stop按钮,该正方形停止移动

<script>   function draw1(id){        var myCanvas =$('#myCanvas');          var context =myCanvas.get(0).getContext("2d");        var canvasWidth = myCanvas.width();    var canvasHeight = myCanvas.height();    // 给动画添加“开始”和“停止”的控制按钮    var playAnimation = true;    var startButton = $('#startAnimation');    var stopButton = $('#stopAnimation');    startButton.hide();    startButton.click(function(){    	$(this).hide();    	stopButton.show();    	playAnimation = true;    	animate();    })    stopButton.click(function(){    	$(this).hide();    	startButton.show();    	playAnimation = false;    })    var x = 0; // 保存当前正方形的X位置。    // animate函数 创建循环,在函数外部调用此函数即可启动该循环    function animate(){    	// 如果playAnimation变量保存的饿是false,那么动画循环停止运行    	if(playAnimation){    		x++;    		context.clearRect(0,0,canvasWidth,canvasHeight);    		context.fillRect(x,250,10,10);    		setTimeout(animate,33);	    	}    }    animate();      }draw1('myCanvas');</script>

 

3.记忆要绘制的形状

主要问题:准确记忆要绘制的对象的内容及位置
方法:对象和数组

步骤:
1).不管形状的数量有多少,首先考虑如何存储每个形状的位置值。
解决方法:每个形状所需的位置值:x,y,通过创建JS类来创建形状对象,如下:

var shape = function(x,y){	this.x = x;    this.y = y;};

2).在不复制代码的情况下如何绘制每个形状。

解决办法:向数组中添加形状对象(push:无须知道数组最后一个元素的序号,push自动将对象添加到数组的最末端)

var shapes = new array();shapes.push(new shape(50,50));shapes.push(new shape(50,150));shapes.push(new shape(50,250));

现在,得到了一组形状,每个形状都有各自的x,y值,这些值存在shapes中
3).将这些形状从数组中取出并更新他们的位置(使之产生动画效果),然后绘制这些形状。
解决办法:在动画内部设置一个for循环

  function animate(){      context.clearRect(0,0,canvasWidth,canvasHeight);      var shapesLength = shapes.length;      for(var i=0;i<shapesLength;i++){        var temshape = shapes[i];        temshape.x++;  // 每次x方向向右移动1        context.fillRect(temshape.x,temshape.y,10,10)  // 画矩形      };      if(playAnimation){        setTimeout(animate,33);       }   }

4).随机产生形状

更改shape类来定义形状的宽高

  var shape = function(x,y,width,height){        this.x = x;        this.y = y;        this.width = width;        this.height = height;      }

然后为每个形状随机选取起始位置和大小

for(var i = 0;i<10;i++){        var x = Math.random()*250;        var y = Math.random()*250;        var width = height = Math.random()*50;        shapes.push(new shape(x,y,width,height));      }

更改fillrect方法的调用,一边采取新的宽高

context.fillRect(temshape.x,temshape.y,temshape.width,temshape.height);

5).改变方向

思路:增加或减少x,y的值
解决:修改 temshape.x++
比如:temshape.x += 2;
     temshape.y++;
这样的话,每次动画循环,都会向右+2,向下+1,从而产生向右对角线方向移动的效果.
或者,动画循环中,将x,y设为随机值,
temshape.x = Math.random()*4-2;
temshape.y = Math.random()*4-2;

这样会让动画运动无规则

-----------------------完整代码-----------------------

<script>  function draw1(id){    var myCanvas =$('#myCanvas');      var context =myCanvas.get(0).getContext("2d");    var canvasWidth = myCanvas.width();    var canvasHeight = myCanvas.height();    var playAnimation = true;    var startButton = $('#startAnimation');    var stopButton = $('#stopAnimation');    startButton.hide();    startButton.click(function(){     $(this).hide();     stopButton.show();     playAnimation = true;     animate();    })    stopButton.click(function(){     $(this).hide();     startButton.show();     playAnimation = false;    })    var shape = function(x,y,width,height){      this.x = x;      this.y = y;      this.width = width;      this.height = height;    }    var shapes = new Array();    for(var i = 0;i<10;i++){      var x = Math.random()*250;      var y = Math.random()*250;      var width = height = Math.random()*50;      shapes.push(new shape(x,y,width,height));    }    function animate(){      context.clearRect(0,0,canvasWidth,canvasHeight);      var shapesLength = shapes.length;      for(var i=0;i<shapesLength;i++){        var temshape = shapes[i];         // 动画循环中,将x,y设为随机值,        temshape.x = Math.random()*200-2;        temshape.y = Math.random()*200-2;        context.fillRect(temshape.x,temshape.y,temshape.width,temshape.height)      };      if(playAnimation){        setTimeout(animate,33);       }    }    animate();  }draw1('myCanvas');</script>