JavaScriptCanvas基础教程：绘图与动画实现

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript Canvas是什么？如何用它绘图和动画？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

Canvas绘图需先获取元素再调用getContext('2d')，返回null则不支持；所有图形通过路径+填充/描边实现，须调用beginPath()防复用；动画用requestAnimationFrame配合clearRect()实现流畅重绘。

Canvas 是浏览器内置的位图画布，不是 DOM 元素，不能直接用 CSS 控制样式或响应鼠标事件——所有绘制必须通过 JavaScript 调用 getContext('2d') 获取绘图上下文后手动完成。

怎么获取 Canvas 绘图上下文并确认是否可用

必须先拿到 元素，再调用 getContext('2d')。如果返回 null，说明浏览器不支持或类型写错（比如误写成 '2D' 或 'webgl' 但没检查返回值）。

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

• getContext('2d') 返回的是一个状态机对象，所有绘图操作都依赖它当前的属性（如 fillStyle、lineWidth）
• 不要在每次绘制时重复调用 getContext，缓存 ctx 变量即可
• Canvas 的宽高必须用 canvas.width / canvas.height 设置（CSS 缩放会拉伸图像，不改变实际分辨率）

怎么画矩形、圆形和路径（非 SVG 方式）

Canvas 没有“画一个圆”这样的独立命令，所有图形都靠路径（path）+ 填充/描边组合实现。常见错误是忘记调用 beginPath()，导致上一次路径被意外复用。

ctx.fillStyle = '#ff6b6b';
ctx.fillRect(10, 10, 100, 50); // 直接填充矩形，不走路径
<p>ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI * 2); // 圆心 x/y、半径、起始/结束弧度
ctx.fill();</p><p>ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 100);
ctx.lineTo(200, 150);
ctx.closePath();
ctx.stroke();</p>

• fillRect() 和 strokeRect() 是快捷方法，不依赖路径，适合简单形状
• arc() 的角度单位是弧度，不是度数；Math.PI * 2 = 360°
• 每次调用 beginPath() 都会清空当前路径，漏掉它会导致多个图形连成一条线

怎么实现流畅动画（避免卡顿和残留）

Canvas 动画本质是「清屏 → 绘制 → 重绘」循环。卡顿通常因为没用 requestAnimationFrame，残留则是因为没清空画布。

function animate() {
  // 清除整个画布（最简单方式）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>// 更新位置、绘制
x += dx;
y += dy;
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 20, 20);</p><p>requestAnimationFrame(animate);
}
animate();</p>

• clearRect() 比 fillRect(0,0,w,h) 更高效，且不会受当前 fillStyle 影响
• 不要用 setTimeout 或 setInterval 驱动动画，它们不与屏幕刷新同步，容易掉帧
• 复杂动画中，只清除需要更新的区域（局部 clearRect）比全屏清除更省性能，但需自己计算脏区

Canvas 的核心约束很明确：它不保存图形对象，只记录像素。这意味着你无法直接点击某个圆形触发事件，也不能单独修改某条线的颜色——所有交互和状态都得自己用 JS 管理。这点和 SVG 完全不同，选型前务必想清楚需求边界。

今天关于《JavaScriptCanvas基础教程：绘图与动画实现》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！