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 是真擦除像素。两者用途完全不同，不能互相替代。