3.canvas动画

动画的基本步骤

1. 清空canvas

ctx.clearRect(0,0, canvas.width, canvas.height);

2. 保存canvas状态
   如果会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之前都是原始状态，那需要通过save()方法保存canvas状态。
3. 绘制动画图形
   重绘动画帧
4. 恢复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