当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5Canvas动画制作入门教程

HTML5Canvas动画制作入门教程

2026-02-14 11:36:45 0浏览收藏

怎么用 `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）才能体现平滑感；整数容易因像素对齐产生抖动
边界判断必须用 <= 0 和 >= canvas.width - diameter，不能只写 === 0——因为速度可能跳过精确等于 0 的帧
反弹后建议微调位置（如 x = 0; vx = -Math.abs(vx)），防止下帧又被判定为越界，卡在边缘抖动

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

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

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

最容易被忽略的瓶颈点：

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

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

今天关于《HTML5Canvas动画制作入门教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！