Canvas动画

最新推荐文章于 2024-12-31 11:06:11 发布

初見驚鴻

最新推荐文章于 2024-12-31 11:06:11 发布

阅读量158

点赞数 1

本文链接：https://blog.youkuaiyun.com/honghaiash/article/details/100676523

版权

本文介绍了Canvas动画的基础，包括其工作原理，通过不断绘制和清空屏幕实现动态效果。主要步骤涉及绘制、清空，控制动画的方法有setTimeout、setInterval和requestAnimationFrame。文章还详细讲解了四种不同的运动形式：线性运动、从左到右的匀速运动、变速运动（模拟自由落体）以及函数控制的运动（如正弦函数）和环形运动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

在这里插入图片描述