HTML5Canvas绘图入门技巧解析

本篇文章给大家分享《HTML5 Canvas能做什么？绘图入门技巧》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

canvas标签本身不绘图，仅提供空白画布，绘图需通过JavaScript调用getContext('2d')获取2D渲染上下文；width/height须用HTML属性设置，CSS仅缩放；drawImage需确保图像加载完成；clearRect清除像素，save/restore管理绘图状态。

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');
// 实心矩形：从 (10, 10) 开始，宽 100，高 50
ctx.fillStyle = '#4a90e2';
ctx.fillRect(10, 10, 100, 50);
// 描边矩形：颜色、线宽需单独设
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 2;
ctx.strokeRect(130, 10, 100, 50);

注意：
- 坐标原点 (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 是真擦除像素。两者用途完全不同，不能互相替代。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。