首页 / 资讯 / 软件教程 / Canvas动画：setInterval实现

Canvas动画：setInterval实现

发布：2026-10-19 16:57:26 阅读：221

利用 canvas 与 setinterval() 实现动态视觉效果

1、创建新文件，初始化尺寸为 400×400 的 canvas 元素，并在页面中引入外部 JavaScript 文件。

2、通过 JavaScript 获取该 canvas 对象及其 2D 渲染上下文（context）。

3、在画布上绘制一个边长为 10 像素的实心正方形。

4、使用 setInterval() 方法设定定时任务，控制图形随时间变化，时间间隔设为指定毫秒值。

5、最终呈现的动态效果如下所示：

6、修改变量 i 的初始值及递增逻辑，以改变运动起始位置或方向。

7、调整后的新动画表现如下：

8、使动画从左右两端同步启动，形成对称移动效果。

9、对应的实际运行效果如下：

10、将动画起点设定为画布四个角的交汇中心点（即坐标原点偏移至中心）。

11、此时动画从画面中央向外扩散，效果示意如下：

12、附：完整 JavaScript 源代码

13、}

14、}

最新资讯