Canvas动画

1：Canvas 动画原理

快速切换的静态画面。

2：基本步骤

• 绘制 - 清空 - 绘制 - 清空 - 绘制 ...

3：控制函数

• setTimeout
• setInterval
• requestAnimationFrame

4：四种运动

线性运动

const canvas = document.getElementById('canvas');
    /* 获得 2d 上下文对象 */
    const ctx = canvas.getContext('2d');
 
    let radialGradient;
    let distance = -50;
    const speed = 5;
 
    const draw = (axisX) => {/* 清空画布 ( 或部分清空) */
        ctx.clearRect(0, 0, 600, 600);
        radialGradient = ctx.createRadialGradient(distance, 300, 10, distance, 300, 50);
        radialGradient.addColorStop(0, "#FFFFFF");
        radialGradient.addColorStop(1, "#EA7F26");
        ctx.fillStyle = radialGradient;
 
        ctx.beginPath();
        ctx.moveTo(distance, 300);
        ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
        ctx.fill();
        
        distance = distance + speed;
        
        if (distance > 650) distance = -50;
 
        requestAnimationFrame(draw);
    }
 
    requestAnimationFrame(draw);ctx.clearRect(0, 0, 600, 600);
 
ctx.beginPath();
ctx.moveTo(distance, 300);
ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
ctx.fill();
 
distance = distance + speed;

从左到右匀速运动

变速运动

const canvas = document.getElementById('canvas');
    /* 获得 2d 上下文对象 */
    const ctx = canvas.getContext('2d');
 
    let radialGradient;
    let distance = 50;
    const speed = 5;
 
    let count = 1;
 
    /*
    * h = 9.8 * (Math.pow(t, 2)) / 2
    */
 
    const draw = (axisX) => {/* 清空画布 ( 或部分清空) */
        ctx.clearRect(0, 0, 600, 600);
        radialGradient = ctx.createRadialGradient(300, distance, 10, 300, distance, 50);
        radialGradient.addColorStop(0, "#FFFFFF");
        radialGradient.addColorStop(1, "#EA7F26");
        ctx.fillStyle = radialGradient;
 
        ctx.beginPath();
        ctx.moveTo(300, distance);
        ctx.arc(300, distance, 50, 0, 2 * Math.PI, false);
        ctx.fill();
 
        count += 1;
 
        distance = 9.8 * (Math.pow(count, 2)) / 100;
        if (distance > 650) {
            distance = -50;
            count = 1;
        }
 
        requestAnimationFrame(draw);
    }
 
    requestAnimationFrame(draw);

从上到下模拟自由落体运动

函数运动（正弦）

const canvas = document.getElementById('canvas');
    /* 获得 2d 上下文对象 */
    const ctx = canvas.getContext('2d');
 
    let radialGradient;
    let distance = 0;
    let axis = 300;
    const speed = 5;
 
    const range = 200;
 
    let angle = 0;
 
    const draw = (axisX) => {/* 清空画布 ( 或部分清空) */
        // ctx.clearRect(0, 0, 600, 600);
        radialGradient = ctx.createRadialGradient(distance, axis, 10, distance, axis, 50);
        radialGradient.addColorStop(0, "#FFFFFF");
        radialGradient.addColorStop(1, "#EA7F26");
        ctx.fillStyle = radialGradient;
 
        ctx.beginPath();
        ctx.moveTo(distance, axis);
        ctx.arc(distance, axis, 50, 0, 2 * Math.PI, false);
        ctx.fill();
        
        axis = 300 + Math.sin(angle) * range;
 
        distance = distance + speed;
        if (distance > 650) {
            distance = 0;
            angle = -.1;
        }
 
        angle += .1;
        requestAnimationFrame(draw);
    }
 
    requestAnimationFrame(draw);

环形运动

const canvas = document.getElementById('canvas');
    /* 获得 2d 上下文对象 */
    const ctx = canvas.getContext('2d');
    let radialGradient;
 
    let angle = 0.1;
    var scope = 20;
 
    let x = 300;
    let y = 100;
 
const draw = (axisX) => {/* 清空画布 ( 或部分清空) */
    ctx.clearRect(0, 0, 600, 600);
    radialGradient = ctx.createRadialGradient(x, y, 10, x, y, 50);
    radialGradient.addColorStop(0, "#FFFFFF");
    radialGradient.addColorStop(1, "#EA7F26");
    ctx.fillStyle = radialGradient;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
    ctx.fill();
 
    x = x + Math.cos(angle) * scope;
    y = y + Math.sin(angle) * scope;
    angle = angle + .1;
 
    requestAnimationFrame(draw);
    ctx.closePath();
 
    ctx.beginPath();
    ctx.arc(300, 300, 200, 0, 2 * Math.PI, false);
    ctx.stroke();}
 
requestAnimationFrame(draw);