HTML5 Canvas能做什么？绘图基础操作详解

HTML5 Canvas 并非“开箱即用”的绘图工具，而是一块需由 JavaScript 精细操控的空白画布——它不自动渲染、不保存内容、无图层概念，所有图形都依赖 `getContext('2d')` 获取的 2D 上下文逐帧绘制；本文直击新手高频踩坑点：宽高必须用 HTML 属性而非 CSS 设置以防失真，`drawImage` 需确保图像加载完成才能调用，`clearRect` 用于清除像素避免拖影，`save/restore` 则精准管理颜色、变换等状态防止污染，配合 `fillRect` 和 `strokeRect` 快速验证环境，帮你避开“什么都没显示”“图形模糊拉伸”“动画重叠混乱”等典型陷阱，真正掌握 Canvas 绘图的核心逻辑与实战要领。

canvas 标签本身不绘图，只是提供一块空白画布

很多人一看到 就以为它能直接显示图形，其实它默认是空的、透明的、没有任何内容的 DOM 元素。真正绘图靠的是 JavaScript 调用其 2D 渲染上下文（getContext('2d')）。没有这一步， 就只是个“看不见的 div”。

常见错误现象：
- 页面上什么都没出现，控制台也没报错
- 修改了 width / height 属性但图形被拉伸或模糊
- 绘图后刷新页面，图形消失（因为 canvas 内容不保存，纯内存绘制）

• 的 width 和 height 是**像素尺寸**，必须用 HTML 属性设置（不是 CSS）；CSS 设置只会缩放，导致失真
• 务必检查 getContext('2d') 返回值是否为 null（比如传错参数、浏览器不支持）
• 绘图操作不会自动触发重绘——每次修改都要重新调用绘图函数（例如在动画中需手动 clearRect() + 重画）

用 fillRect 和 strokeRect 快速画出第一个矩形

这是最直观的入门操作，不需要路径管理，适合验证环境是否正常。区别在于：前者实心填充，后者只描边。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>// 实心矩形：从 (10, 10) 开始，宽 100，高 50
ctx.fillStyle = '#4a90e2';
ctx.fillRect(10, 10, 100, 50);</p><p>// 描边矩形：颜色、线宽需单独设
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 2;
ctx.strokeRect(130, 10, 100, 50);</p>

注意：
- 坐标原点 (0, 0) 在 canvas 左上角
- fillStyle 和 strokeStyle 支持颜色名、十六进制、rgb()、rgba() 等
- lineWidth 默认是 1，且单位是 CSS 像素，非物理像素（高清屏下可能显得细）

drawImage 用于贴图，但尺寸和坐标容易搞反

drawImage 有 3 种参数形式，最常用的是 5 参数版（源图像 + 目标位置与尺寸），新手常把“源区域裁剪”和“目标区域缩放”混为一谈。

• 5 参数：drawImage(image, dx, dy, dWidth, dHeight) → 把整张图缩放到指定大小贴到 canvas 上
• 9 参数：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) → 先从原图裁 (sx,sy) 开始的 sWidth×sHeight 区域，再缩放到目标尺寸
• 图像加载完成前调用会静默失败——必须监听 image.onload 或使用 await createImageBitmap()

典型错误：
- 图片没显示，但控制台无报错（其实是 image 还没加载完就调了 drawImage）
- 贴出来的图变形、偏移、只显示一角（参数顺序或数值填反）

clearRect 和 save/restore 控制绘图状态，漏掉会导致意外叠加

canvas 没有“图层”概念，所有绘制都在同一块位图上累积。如果不清理，动画会拖影，多次绘图会层层覆盖。

• clearRect(x, y, width, height) 只清指定矩形区域，不是全屏清空；清全屏就用 clearRect(0, 0, canvas.width, canvas.height)
• save() 记录当前所有绘图状态（颜色、变换、裁剪等），restore() 回滚——这对局部旋转、缩放、裁剪特别关键
• 漏掉 restore() 会导致后续所有绘图被意外缩放或旋转（状态污染）

一个易忽略的细节：
save() / restore() 不影响 canvas 像素数据，只保存/恢复状态栈；而 clearRect 是真擦除像素。两者用途完全不同，不能互相替代。

到这里，我们也就讲完了《HTML5 Canvas能做什么？绘图基础操作详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！