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;