Canvas是个在网页画图的玩意儿，虽没直接做动画，但用脚本操控下，简单的活动效果就能出炉。咱要动下图片，可就得把整个重画一遍，既费时间又要看电脑跑得快慢。
Canvas动画的步骤就是把Canvas弄干净、存个档、画点东西、再把Canvas还原回去。刷干净Canvas就用clearRect方法好了，当然如果后面的操作能把Canvas填满那也没问题。每次要换Canvas状态前，比如换个样式或者变个形啥的，都得先把原来的Canvas状态给存起来。
基本动画的实现步骤
要制作Canvas动画，得先干两件事。第一步，就是把画布给擦干净点，就像打扫屋子一样重要！推荐你用clearRect这个命令，可好用了。接下来，如果你中间换了画笔、添了色彩等等让画布变了形，那就在每一张画面之前都记录下当前的状态，这样才能保证每一帧画面都是从最初的形态开始画起。
下面是画动画图，就是这个动画的重要环节！这一步就得画出每个画面。完成后，要是之前存过Canvas的状态，那就在画新画面前把它们调回来，这样才能保证动画连贯又准确。
操控动画的方法
画Canvas上的东西，一般就两种办法，用标准的Canvas选项或者自己编个程序搞定。可是，这些小动作得等到整个程序跑完才能看出效果。想要动画变得流畅，得学会怎么定期刷刷新。这个任务就交给JavaScript的setInterval和setTimeout两个好帮手。setInterval就是让你设定一段时间，然后每隔这段时间就自动运行一下函数；setTimeout就更简单了，就是告诉它什么时候开始运行函数，然后就等着那个时刻到来。
动画实例：小型太阳系模拟
让我给大家说说怎么用Canvas做个动态的太阳系！首先，拿起笔和纸描绘好太阳和几颗行星的大体轮廓和大小规模，然后用setInterval这个小宝贝定时调节这些星体的位置，重新画一遍Canvas就搞定！这样，你就能看出它们像跳华尔兹一样围着太阳转了哟。
性能优化技巧
Canvas动画挺棒的，但要是没做好性能优化，就容易变得卡顿或迟延。有几个小技巧挺管用的，比如少重画、多用requestAnimationFrame（比setInterval和setTimeout好）以及优化分解逻辑、削减每帧所需计算。只要照做就能让动画在各种设备上都跑得溜溜的。
交互性的增强
setInterval(animateShape,500); setTimeout(animateShape,500);
除了普通的动画，你还可以给Canvas动画加点料，比如添加交互功能。这样，观众在看动画时就可以直接上手操作，改变画面内容或是播放节奏了。这种互动设计不只是增加了趣味性，也能提升观看者的参与感
跨浏览器兼容性
画布动起来的时候，别忘了考虑一下浏览器兼容这块儿。虽然现在大部分的浏览器都挺友好地支持Canvas元素和相关的JavaScriptAPI了，但是老版本的浏览器可能就有点儿麻烦。所以，为了让动画在各种浏览器上都能跑得欢快，咱们可以借助一些工具或者库来搞定兼容性问题，或者提供一些备用方案或者提示给用户。
未来的发展趋势
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
sun.src = 'images/sun.png';
moon.src = 'images/moon.png';
earth.src = 'images/earth.png';
setInterval(draw,100);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300); // clear canvas
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
// Earth
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24); // Shadow
ctx.drawImage(earth,-12,-12);
// Moon
ctx.save();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
ctx.stroke();
ctx.drawImage(sun,0,0,300,300);
}
现在网络科技越来越先进了，Canvas动画也在不断进步！以后会有更多新花样，比如说更快的画法，更棒的动画调控API，还有更好用的性能提升工具。这样一来，Canvas动画就变得更强大、更灵活，给我们开发者创造出更多可能。
评论0