canvas 不绘制图形，而是提供位图绘图上下文；需用 getContext(‘2d’) 获取并校验非 NULL；width/height 是像素尺寸，css 缩放致模糊；2D 与 webgl 上下文互斥；绘图遵循状态机：设样式→建路径→fill/stroke；clearRect() 比重置 width/height 更轻量且可控。
canvas 本身不“绘制图形”，它提供的是一个位图绘图上下文，所有图形都靠调用 getContext('2d') 返回的 2D 渲染上下文方法一笔一划画出来——没有 dom 节点、没有自动重绘、没有内置坐标系缩放，画完即“冻结”在像素格里。
怎么获取并确认 canvas 可用的 2D 上下文
必须先通过 getContext('2d') 获取上下文对象，且要检查返回值是否为 null（比如浏览器不支持或传错参数）：
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); if (!ctx) { console.error('2D context not supported'); }-
canvas.width和canvas.height是绘图表面的实际像素尺寸，不是 CSS 样式宽高；设成 0 或未设置会导致ctx无法正常绘图 - 用 CSS 缩放
canvas元素会拉伸像素，造成模糊；如需响应式，应监听窗口变化后重设canvas.width/height并重绘 -
getContext('webgl')或'webgl2'是另一套 API，和 2D 上下文互斥，不能混用
画直线、矩形、圆这些基础图形的关键步骤
Canvas 是状态机模型：设置样式（fillStyle、strokeStyle）、定义路径（beginPath() → 各种 lineTo()/arc()）、再调用 fill() 或 stroke() 才真正上色。漏掉 beginPath() 会导致路径叠加，反复调用 stroke() 会重复描边。
- 画实心矩形：
ctx.fillRect(x, y, width, height)—— 不走路径，直接填充 - 画空心矩形：
ctx.strokeRect(x, y, width, height)—— 同样跳过路径 - 画任意路径（如三角形、多边形）：
ctx.beginPath()→ctx.moveTo()→ctx.lineTo()×n →ctx.closePath()→ctx.fill()或ctx.stroke() - 画圆：
ctx.arc(x, y, radius, startAngle, endAngle)，角度单位是弧度；画实心圆记得加ctx.fill()
为什么 clearRect() 比重置 width/height 更常用
清空画布最常用的是 ctx.clearRect(0, 0, canvas.width, canvas.height)，而不是反复设置 canvas.width = canvas.width（虽然这也有效）：
立即学习“Java免费学习笔记（深入）”；
-
clearRect()只清指定区域，不影响 canvas 元素的width/height属性，适合局部擦除或动画中保留部分画面 - 重设
canvas.width会重置整个上下文状态（包括所有样式、变换、裁剪路径），开销更大，且可能意外丢弃你手动保存的ctx.save()状态 - 如果 canvas 已应用 CSS transform，
clearRect()仍按逻辑像素操作，而重设 width/height 会强制重绘整个位图，可能触发额外布局计算
Canvas 的“难”不在语法，而在它把所有控制权交给你：坐标系原点在左上角、没有图层概念、抗锯齿开关依赖 imageSmoothingEnabled、文字测量靠 ctx.measureText() 手动对齐——稍不注意，画出来的线就偏半像素、文字就糊成一片。