对画布绘制实现动画 -Canvas的基本操作

由于是用脚本操控canvas对象的，这样要实现一些交互动画也是相
当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像
Flash），这样难免会有些限制。可能最大的限制就是图像一旦绘制出
来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西
（包括之前的）进行重绘了。
对画布绘制实现动画的步骤如下：
（1）预先编写好用来绘图的函数，在该函数中先用clearRect方法将
画布整体或局部擦除。
（2）使用setInterval方法设置动画的间隔时间。
setInterval方法为HTML中固有的方法，该方法接受两个参数，第一个参数表示执行动画的函数，第二个参数为时间间隔，单位为毫秒。

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>移动的小方块</title>  
<script >
var context;
var width,height;
var i;
function draw(id)
{
    var canvas = document.getElementById(id);  
    if (canvas == null)  
        return false;  
    context = canvas.getContext('2d'); 
  width=canvas.width;
   height=canvas.height;
    i=0;
    setInterval(rotate,100);         //十分之一秒
}
function rotate()
{   
    context.clearRect(0,0,width,height);
    context.fillStyle = "blue";
    context.fillRect(i, 0, 20, 20);
    i=i+20;
}
</script>  
</head>  
<body onload="draw('canvas');">  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

猜你喜欢