canvas,setInterval()制作动画

1、新建文件创建400*400画布引入js脚本

2、js获取画布和上下文

3、创建一个10*10的正方形

4、setInterval()设置动画和时间

5、效果如图

6、改变i的值

7、效果如图

8、设置动画从两端重合

9、效果如图

10、设置动画从四个角重合

11、效果如图

12、附上js源码var i;function 蟠校盯昂draw(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); setInterval( painting,100); i=0; } function painting(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "red" context.fillRect(i,i,10,10); context.fillRect(400-i,400-i,10,10); context.fillRect(400-i,i,10,10); context.fillRect(i,400-i,10,10); //i=i+20; i=i+10; }