Canvas动画

最新推荐文章于 2025-04-28 11:45:19 发布

大前小白

最新推荐文章于 2025-04-28 11:45:19 发布

阅读量4.1k

点赞数 2

分类专栏： CSS 文章标签： Canvas动画

本文链接：https://blog.youkuaiyun.com/weixin_45195200/article/details/96990822

版权

本文介绍了Canvas动画的基本原理，即通过快速切换静态画面创建动画效果。详细阐述了动画的实现步骤，包括绘制、清空、再绘制等。还讨论了控制动画的三种函数：setTimeout、setInterval和requestAnimationFrame。此外，文章深入讲解了四种不同的运动类型，分别是线性运动、变速运动（模拟自由落体）、函数运动（如正弦波）以及环形运动，为Canvas动画设计提供了丰富的示例。

摘要生成于 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;

最低0.47元/天解锁文章