Canvas是什么？JS绘图教程详解

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Canvas是什么？JavaScript如何绘图》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

Canvas绘图需先用getElementById获取元素再调用getContext('2d')获取上下文，否则报错；drawRect仅描边、fillRect仅填充、clearRect清空区域；drawImage需等图片load后调用；requestAnimationFrame比setTimeout更适合动画因其与屏幕刷新同步。

Canvas 是 HTML 中的一个 元素，它本身不绘图，只提供一块空白的位图画布；真正绘图靠的是 JavaScript 调用其 2D 渲染上下文（getContext('2d')）提供的 API。

你不能直接“写”图形到 上，必须通过 JS 获取上下文、设置样式、调用绘图方法，再手动触发绘制——这是初学者最容易卡住的地方。

怎么获取 canvas 的 2D 绘图上下文

必须先用 document.getElementById() 拿到 DOM 元素，再调用 getContext('2d')。如果漏掉这一步，所有绘图方法都会报错：TypeError: Cannot read property 'xxx' of null。

• getContext('2d') 返回一个 CanvasRenderingContext2D 对象，所有绘图操作都通过它进行
• 不能重复调用 getContext('2d') 创建多个上下文——它返回的是同一个实例
• 如果页面还没加载完就执行 JS，getElementById 可能返回 null，建议放在 DOMContentLoaded 事件里或把 script 放在 body 底部

const canvas = document.getElementById('myCanvas');
if (canvas) {
  const ctx = canvas.getContext('2d'); // 必须这一步
  ctx.fillStyle = '#ff6b6b';
  ctx.fillRect(10, 10, 100, 80); // 现在才能画
}

drawRect 和 fillRect 有什么区别

strokeRect() 只描边，fillRect() 只填充，clearRect() 清空指定区域（设为透明）。它们都是立即生效的“快捷方法”，不经过路径（path）机制。

• 三者参数完全一致：(x, y, width, height)
• strokeRect() 受 ctx.strokeStyle 和 ctx.lineWidth 控制
• fillRect() 受 ctx.fillStyle 控制
• clearRect() 不受任何样式影响，强制清为透明（alpha=0）
• 如果你需要带圆角、阴影或渐变的矩形，就不能只靠这三个函数，得走 beginPath() + rect() + fill()/stroke() 流程

为什么 drawImage 不显示图片

常见原因是图片还没加载完成就调用了 drawImage()，导致绘图时图像数据为空。Canvas 不会等图片加载——它只认当前是否已解码。

• 务必监听图片的 load 事件，在回调里调用 drawImage()
• 不要用本地 file:// 协议直接打开 HTML——现代浏览器会因 CORS 策略阻止 drawImage 读取本地图片
• drawImage() 有 3 种签名，最常用的是：drawImage(image, dx, dy) 和 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)（用于裁剪缩放）
• 如果传入 image 是 元素但 src 为空或 404，控制台通常不会报错，但画面什么也不出现

const img = new Image();
img.src = 'logo.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 100); // 确保此时 img 已加载完毕
};

requestAnimationFrame 为什么比 setTimeout 更适合动画

因为 requestAnimationFrame() 由浏览器统一调度，与屏幕刷新率（通常是 60fps）同步，而 setTimeout(fn, 16) 只是“尽量每 16ms 执行一次”，实际可能延迟、跳帧甚至被节流。

• 使用 requestAnimationFrame 时，浏览器知道你在做动画，可能自动优化（如标签页后台时暂停）
• 它传入的时间戳是高精度的 DOMHighResTimeStamp，可用于计算精确帧间隔
• 必须在每次回调末尾再次调用自身，形成循环；忘记这步，动画只会执行一帧
• 如果动画逻辑耗时过长（>16ms），下一帧会被推迟，但不会丢帧——setTimeout 在这种情况下容易累积延迟

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 更新位置、重绘...
  requestAnimationFrame(animate); // 关键：自己调自己
}
requestAnimationFrame(animate);

Canvas 的核心不是“画什么”，而是“何时画、怎么同步、怎么管理状态”。很多视觉 bug 表面上是绘图代码错了，其实是上下文状态没重置（比如忘了 ctx.beginPath()）、坐标系没搞清（translate/scale 残留）、或者异步时机没卡准。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Canvas是什么？JS绘图教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。