JavaScript Canvas绘图与动画教程

这篇文章深入剖析了JavaScript Canvas绘图与动画的核心原理与实战要点，揭示Canvas表面简洁背后的精细控制逻辑：从必须通过getContext('2d')安全获取绘图上下文并校验有效性，到用fillRect/strokeRect快速画矩形、arc精准绘制圆形、beginPath+路径方法构建复杂图形；从requestAnimationFrame驱动的“清屏→更新状态→绘制→循环”三步动画范式，彻底替代setTimeout的掉帧陷阱，到drawImage必须绑定onload事件规避图片未加载导致的静默失败；更点明了高DPI适配、路径累积、跨域处理等易错细节——Canvas不提供高级抽象，却赋予开发者极致自由，而真正的挑战恰恰藏在每一步的手动校验、状态管理和异步协调之中。

Canvas 本身不提供“绘制图形”的高级接口，所有图形都靠 context 的底层绘图命令一条条画出来；动画不是 Canvas 自带功能，而是靠 requestAnimationFrame 驱动重绘实现的。

怎么获取并初始化 2D 绘图上下文

必须先拿到 元素，再调用 getContext('2d')。如果跳过这步直接操作，所有绘图方法都会报错或静默失败。

• getContext('2d') 返回的是一个 CanvasRenderingContext2D 实例，它才是真正的绘图对象
• 务必检查返回值是否为 null（比如传了错误的上下文类型如 'webgl' 但浏览器不支持）
• 推荐在 DOMContentLoaded 后获取元素，避免 DOM 尚未就绪

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
  console.error('2D context not available');
}

怎么画矩形、圆形和路径

Canvas 没有“画圆”这种独立函数，arc() 是唯一画弧/圆的方式；矩形虽有快捷方法，但本质仍是路径操作。

• fillRect(x, y, width, height) 和 strokeRect(x, y, width, height) 是特例，不依赖路径状态
• 画圆必须用 arc(x, y, radius, startAngle, endAngle, anticlockwise)，注意角度单位是弧度，不是度
• 任何基于路径的绘制（如 fill()、stroke()）前，必须先调用 beginPath()，否则会累积上一次路径，导致意外重绘
• 路径画完后建议立即调用 closePath()（尤其多边形），否则可能缺边

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2); // 完整圆
ctx.fillStyle = 'blue';
ctx.fill();
<p>ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 100);
ctx.lineTo(200, 150);
ctx.closePath(); // 关键：闭合三角形
ctx.strokeStyle = 'red';
ctx.stroke();</p>

怎么实现平滑动画（不是 setTimeout 循环）

Canvas 动画的核心是「清空 → 绘制 → 请求下一帧」三步闭环，requestAnimationFrame 是唯一推荐方式；用 setTimeout 或 setInterval 会导致掉帧、卡顿甚至失控。

• 每次动画帧开始前，必须用 clearRect(0, 0, canvas.width, canvas.height) 清屏（或只清局部区域）
• 不要在动画循环里反复调用 getContext('2d')，复用已有 ctx
• 动画逻辑应分离：状态更新（如 x += dx）和绘制（ctx.fillRect(...)）不能混在一起写死
• 注意 canvas 的像素比问题：高 DPI 屏幕下，若未缩放 canvas.width/canvas.height，图形会模糊

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>ctx.fillStyle = 'green';
ctx.fillRect(x, 50, 40, 40);</p><p>x += 2;
if (x > canvas.width) x = -40;</p><p>requestAnimationFrame(animate);
}
animate();</p>

为什么 drawImage 有时不显示图片

drawImage() 不会等待图片加载完成，它只管“此刻有没有图像数据”。如果图片还没加载好就调用，什么也不会画出来，也不报错。

• 必须监听图片的 load 事件，在回调里调用 drawImage
• 已缓存的图片（如重复使用同一 img 对象）可能触发同步加载，但不可依赖
• 用 crossOrigin 属性处理跨域图片，否则后续调用 toDataURL() 或读取像素会失败
• 参数顺序容易错：drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，前 3 个是源图裁剪，后 4 个是目标绘制位置和尺寸

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'sprite.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 64, 64, 100, 100, 64, 64);
};

Canvas 的“简单”是假象——它把所有控制权交给你，也意味着每一步都要自己校验状态、管理资源、处理边界。最容易被忽略的是 beginPath() 的调用时机、clearRect() 的范围精度，以及图片加载异步性带来的竞态。这些地方一漏，动画就断、图形就叠、调试就抓瞎。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~