动画的基本步骤
- 清空canvas
ctx.clearRect(0,0, canvas.width, canvas.height);
- 保存canvas状态
如果会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之前都是原始状态，那需要通过save()方法保存canvas状态。 - 绘制动画图形
重绘动画帧 - 恢复canvas状态
如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧
开始动画
setInterval(function, delay)
当设定好间隔时间后，function会定期执行，多用于跟用户交互操纵
setTimeout(function, delay)
在设定好的时间之后执行函数
requestAnimationFrame(callback)
window.requestAnimationFrame(callback)
告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
MDN示例：
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let sun = new Image();
let moon = new Image();
let earth = new Image();
function init() {
sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw () {
ctx.globalCompositeOperation = 'destination-over'; //新内容在原内容下方绘制
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();//fill stroke 状态保存
ctx.translate(150,150);
//earth
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24); // Shadow
ctx.drawImage(earth,-12,-12);
//moon
ctx.save();//地球的位移状态
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);
window.requestAnimationFrame(draw);
}
init();
image.png
加入月亮地球的旋转：
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let sun = new Image();
let moon = new Image();
let earth = new Image();
function init() {
sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw () {
ctx.globalCompositeOperation = 'destination-over'; //新内容在原内容下方绘制
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();//fill stroke 状态保存
ctx.translate(150,150);
//earth
let 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);
window.requestAnimationFrame(draw);
}
init();
GIF.gif
