Canvas绘图与动画实现全攻略

本文深入浅出地讲解了JavaScript中Canvas绘图与动画实现的核心原理与实用技巧，强调动画的本质并非单次绘制，而是由requestAnimationFrame驱动的“清空→计算→重画”高效闭环；通过获取2D上下文绘制静态图形起步，再结合状态变量、清晰分离的clear/draw/update逻辑，轻松实现如小球弹跳等基础动画，并进一步给出提升流畅度、避免拉伸、优化性能及面向对象封装等实战建议，让初学者快速掌握可扩展、高性能的Canvas动画开发方法。

Canvas 绘图核心是获取上下文后调用绘图方法，动画则靠 requestAnimationFrame 循环更新并重绘。关键不在“画一次”，而在“持续清空→计算→重画”这个闭环。

获取 Canvas 上下文并画一个静态图形

先在 HTML 中定义 canvas 元素，再用 JavaScript 获取 2D 渲染上下文：

<canvas id="myCanvas" width="400"    style="max-width:100%"></canvas>

然后用 JS 绘制一个带颜色的圆形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>// 设置填充色
ctx.fillStyle = '#4a90e2';
// 开始绘制圆形（圆心 x=200, y=150，半径 50）
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.fill();</p>

让图形动起来：实现基础动画循环

动画本质是快速连续重绘——每次微调位置/大小/颜色，再清屏重画。不要用 setInterval，优先用 requestAnimationFrame，它由浏览器调度，更流畅、更省资源。

• 定义变量记录状态（如小球的 x 坐标、速度）
• 写一个 draw 函数：清空画布 + 绘制当前帧
• 写一个 update 函数：更新位置（比如 x += vx）
• 用 requestAnimationFrame 递归调用主循环函数

一个可运行的小球弹跳示例

下面代码让一个小球从左向右匀速移动，碰到右边界后反弹：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>let x = 50, y = 150;
let vx = 2; // 水平速度
const radius = 20;</p><p>function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}</p><p>function draw() {
ctx.fillStyle = '#ff6b6b';
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}</p><p>function update() {
x += vx;
if (x + radius > canvas.width || x - radius < 0) {
vx = -vx; // 反向
}
}</p><p>function loop() {
clear();
draw();
update();
requestAnimationFrame(loop); // 下一帧继续
}</p><p>loop(); // 启动动画</p>

提升动画体验的小技巧

真实项目中注意这些细节，动画会更自然稳定：

• 使用 canvas.width 和 canvas.height 而非 CSS 设置的宽高，避免图像拉伸
• 清除画布用 clearRect，比 fillRect 更高效
• 复杂动画建议封装成类（如 Ball、Particle），便于管理多个对象
• 需要精准时间控制时，可在 requestAnimationFrame(callback) 的回调中接收时间戳参数做帧率适配

到这里，我们也就讲完了《Canvas绘图与动画实现全攻略》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！