JavaScriptCanvas教程：基础绘图入门

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript绘图基础：Canvas使用教程》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

必须先用 getContext('2d') 获取 CanvasRenderingContext2D 对象才能绘图，否则调用 fillRect 等方法会报错；fillRect 填充矩形，strokeRect 仅描边，二者样式不共享；Canvas 尺寸应通过 width/height 属性设置，而非 CSS；动画中需每帧 clearRect 并合理管理状态。

怎么用 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 本身没魔法，关键在每次绘制前想清楚：我要清什么、画什么、状态变没变。

理论要掌握，实操不能落！以上关于《JavaScriptCanvas教程：基础绘图入门》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！