html5-canvas动画

canvas 动画

动画的基本步骤

1. 清空 canvas
   除非接下来要画的内容会完全充满canvas(例如背景图)，否则你需要清空所有。最简单使用clearRect方法。
2. 保存 canvas 状态
   如果你改变一些会改变 canvas 状态的设置，又要在每画一帧之时都是原始状态的话，需要先保存一下。
3. 绘制动画图形 animated shapes
   重绘动画帧
4. 恢复 canvas 状态
   如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

操作动画

• setInterval(fun,delay)
  延迟 delay 毫秒后执行函数
• setTimeout(func,delay)
  间隔 delay 毫秒执行函数
• requestAnimationFrame(callback)
  告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。

  function init() {
    window.requestAnimationFrame(draw);
}

function draw() {
    let ctx = document.getElementById('my_canvas').getContext('2d');
    ctx.save()
    ctx.clearRect(0, 0, 400, 400);

    //每个间隔弧度
    let angle = 2 * Math.PI / 60;

    function drawBorder() {
        ctx.save(); //1
        ctx.strokeStyle = '#3D5F9D';
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.arc(200, 200, 150, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore()
    }

    function drawSplit() {
        ctx.save()
        ctx.translate(200, 200);
        //分隔
        for (let i = 1; i <= 60; i++) {
            ctx.rotate(angle);
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 4;
            ctx.beginPath();
            if (i % 5) {
                ctx.moveTo(0, -127);
                ctx.lineTo(0, -130);
            } else {
                ctx.moveTo(0, -120);
                ctx.lineTo(0, -132);
            }
            ctx.stroke();

        }
        ctx.restore();
    }

    function drawHour(angle) {
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(angle)
        //时针
        ctx.lineCap = 'round';
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -90)
        ctx.stroke();
        ctx.restore();
    }

    function drawMinute(angle) {
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(angle)
        //分针
        ctx.lineCap = 'round';
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -125)
        ctx.stroke();
        ctx.restore();
    }

    function drawSecond(angle) {
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(angle)
        //秒针
        ctx.lineCap = 'round';
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'red';
        ctx.beginPath();
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -112);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, -120, 7, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();
    }
    //中心
    function drawCenter() {
        ctx.save();
        ctx.translate(200, 200);
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore()
    }

    //计算角度
    let date = new Date();
    let hour = date.getHours() % 12;
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let second_ag = seconds * angle;
    let minute_ag = (minutes * angle + second_ag / 60) * 5;
    let hour_ag = (hour * angle + minute_ag / 60) * 5;
    drawBorder()
    drawSplit()
    drawHour(hour_ag)
    drawMinute(minute_ag)
    drawSecond(second_ag)
    drawCenter()

    window.requestAnimationFrame(draw);
}
init();

高级动画

有兴趣的时候来补充