Canvas绘图入门：JavaScript基础教程

本文深入浅出地讲解了JavaScript中Canvas绘图的核心要点，从获取2D绘图上下文（getContext('2d')）这一必要前提出发，厘清fillRect与strokeRect的本质区别及样式独立性，强调Canvas尺寸必须通过width/height属性而非CSS设置以避免失真，并系统剖析了requestAnimationFrame动画中清屏、状态管理与性能优化的关键实践——帮你避开常见陷阱，真正掌握Canvas绘图的底层逻辑与实用技巧。

怎么用 getContext('2d') 获取绘图上下文

不拿到上下文，canvas 标签就是一张白纸，啥也画不了。必须先用 getContext('2d') 才能调用绘图方法。

常见错误：直接对 元素调用 fillRect 或 stroke —— 这会报 TypeError: canvas.fillRect is not a function。

• 确保 DOM 已加载完成，再获取元素（比如放在 DOMContentLoaded 里或 script 放在 body 底部）
• getContext('2d') 返回的是一个 CanvasRenderingContext2D 对象，所有绘图操作都靠它
• 如果传错参数（如 'webgl' 但浏览器不支持），会返回 null，记得加判断

画矩形时 fillRect 和 strokeRect 的区别在哪

这两个函数看着像，行为却完全不同：一个填满，一个只描边。

容易踩的坑是混淆默认样式 —— fillRect 默认用黑色实心填充，strokeRect 默认用黑色 1px 描边，但它们**不共享**颜色、线宽等设置。

• fillRect(x, y, width, height)：从 (x,y) 开始画实心矩形
• strokeRect(x, y, width, height)：只画矩形边框，内部透明
• 改填充色要用 ctx.fillStyle = '#f00'，改描边色要用 ctx.strokeStyle = '#00f'
• 改线宽必须在 strokeRect 前设 ctx.lineWidth = 3，否则无效

为什么画了线却看不见？检查这三点

最常见原因不是代码写错，而是 canvas 尺寸和 CSS 尺寸混了。

Canvas 是位图，它的绘制分辨率由 width 和 height 属性决定；而 CSS 的 width/height 只是拉伸显示区域 —— 拉伸后图像会模糊或缩成一团。

• 别用 CSS 设置 canvas 大小，改用 HTML 属性：
• 如果真要响应式，得用 JS 动态同步：读取 canvas.clientWidth，再赋给 canvas.width 和 canvas.height
• 画完记得调用 ctx.beginPath()，否则多条路径会连在一起，导致意外连线或填充错乱

requestAnimationFrame 画动画时要注意什么

它不是“让 canvas 动起来”的银弹，只是提供一帧时机；真正动不动，取决于你怎么清屏、重绘、更新状态。

漏掉清屏是最典型问题 —— 每帧都在原图上叠加，结果满屏残影。

• 每帧开头通常要 ctx.clearRect(0, 0, canvas.width, canvas.height)
• 避免在循环里反复创建路径对象或临时数组，会触发 GC，卡顿明显
• 如果只是简单移动图形，用 transform（如 ctx.translate(x, y)）比重绘整个形状更轻量
• requestAnimationFrame 回调函数接收一个时间戳参数，可用于做匀速运动（而非依赖 setInterval）

实际绘图逻辑往往嵌在状态更新、事件响应、资源加载等多个环节里，canvas 本身没魔法，关键在每次绘制前想清楚：我要清什么、画什么、状态变没变。

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