HTML5动画怎么做用Canvas绘制动画_基础绘制与动效实现教程【教程】

canvas动画本质是requestanimationframe驱动的逐帧清屏重绘，需手动更新对象状态、用clearrect配合状态重置防叠加模糊，并避免像素操作、频繁创建对象等性能陷阱。

canvas 动画不是“加个动画属性”就能跑起来的，它本质是靠反复清屏 + 重绘实现的视觉暂留效果，核心在于 requestAnimationFrame 控制帧率、clearRect 管理画面状态、以及对象位置/状态的逐帧更新。

怎么用 requestAnimationFrame 替代 setTimeout 写主循环

用 setTimeout 容易掉帧、时间不准，requestAnimationFrame 会自动对齐屏幕刷新率（通常是 60fps），且页面切到后台时自动暂停，省电又安全。

实操建议：

• 必须把动画逻辑封装进一个函数里，再传给 requestAnimationFrame，不能直接写 requestAnimationFrame(draw) 后就结束——否则只执行一次
• 函数末尾要再次调用 requestAnimationFrame，形成递归调用链
• 别在循环里做耗时操作（比如遍历大数组、触发重排），否则直接卡顿

function animate() {   ctx.clearRect(0, 0, canvas.width, canvas.height);   update(); // 更新小球 x/y、速度等   render(); // 绘制小球   requestAnimationFrame(animate); // 关键：自己调自己 } requestAnimationFrame(animate);

clearRect 清屏不彻底？常见漏点在哪

清屏只是擦掉像素，不会重置绘图状态（比如 fillStyle、globalAlpha、lineWidth）。如果上一帧设置了半透明填充，不清除状态，下一帧叠加绘制就会越来越“糊”。

立即学习“前端免费学习笔记（深入）”；

常见错误现象：

• 动画物体边缘发虚、颜色变深
• 旋转图形越转越粗（因为 stroke 多次叠加）
• 文字模糊、阴影堆叠

实操建议：

• 每次 clearRect 后，显式重置关键状态：如 ctx.globalAlpha = 1、ctx.setTransform(1, 0, 0, 1, 0, 0)
• 避免在动画循环里反复调用 save()/restore()，开销大；优先用 setTransform 重置矩阵
• 如果只动局部区域（比如只更新一个小图标），可不用全屏清屏，改用 clearRect(x, y, w, h) 擦指定矩形区

怎么让小球动起来：位置更新 + 边界反弹的最小闭环

Canvas 本身不管理对象，所有“运动”都靠你手动算坐标。最简模型就是：每帧给 x、y 加上 vx、vy，碰到边缘就翻转速度方向。

实操要点：

• 速度值别写死成整数（比如 vx = 2），要用小数（vx = 2.3）才能体现平滑感；整数容易因像素对齐产生抖动
• 边界判断必须用 和 <code>>= canvas.width - diameter，不能只写 === 0——因为速度可能跳过精确等于 0 的帧
• 反弹后建议微调位置（如 x = 0; vx = -math.abs(vx)），防止下帧又被判定为越界，卡在边缘抖动

function update() {   x += vx;   y += vy;   if (x <= 0 || x >= canvas.width - size) vx *= -1;   if (y <= 0 || y >= canvas.height - size) vy *= -1; }

Canvas 动画卡顿？先盯这三个地方

卡顿 rarely 是 Canvas 本身的问题，大概率出在你的代码结构或资源使用上。

最容易被忽略的瓶颈点：

• getImageData / putImageData：每帧读写像素数据是重量级操作，能不用就不用；真要图像处理，考虑 Web Workers 或 OffscreenCanvas
• 频繁创建对象：比如每帧 new 一个 Path2D 或临时数组，会触发 GC，造成偶发卡顿；复用对象或用 Pool 管理
• 监听了 resize 但没节流：窗口拖拽时高频触发 canvas 重设宽高，会清空缓冲、重置上下文，打断动画流

Canvas 动画的“复杂点”不在怎么画，而在于你怎么管状态、控节奏、避陷阱——画布是白纸，但纸上的每一笔，都得你自己记清楚谁画过、谁该擦、谁还没动。