Canvas 是需手动管理的像素区域，绘图分辨率由 HTML 的 width/height 属性决定，CSS 仅缩放显示；必须通过 getContext("2d") 获取上下文绘图，依赖位图重绘机制，性能优化靠 requestAnimationFrame、离屏 canvas 和多层分离。
Canvas 不是“画完就完”的静态容器，而是一块需要主动管理的像素区域。它不自动更新、不维护图层、也不响应式缩放——所有视觉变化都靠 JavaScript 手动重绘。真正发挥其高性能优势，关键在于理解它的底层机制并按规则初始化。
画布尺寸必须用 HTML 属性定义
Canvas 的实际绘图分辨率由 width 和 height 这两个 HTML 属性决定，不是 CSS 样式：
- ✅ 正确写法：
<canvas id="draw" width="800" height="600"></canvas> - ❌ 错误写法：
<canvas id="draw" style="width:800px;height:600px"></canvas>（仅缩放显示，导致图像模糊、坐标偏移） - 默认尺寸是 300×150 像素，未设属性时会按此渲染，CSS 改变的只是显示大小，不影响绘制精度
绘图必须通过 2D 上下文操作
Canvas 元素本身不绘图，所有图形输出都依赖 CanvasRenderingContext2D 实例：
- 调用
getContext("2d")获取上下文，这是唯一合法入口 - 同一个 canvas 不能同时获取 2D 和 WebGL 上下文，不可混用
- 建议加兼容判断：
if (ctx) { /* 开始绘图 */ }，避免旧浏览器报错
位图重绘机制是性能核心
Canvas 是内存中的位图缓冲区，每次更新都要手动清除再重画：
立即学习“前端免费学习笔记（深入）”；
- 没有 DOM 更新开销，适合每秒 60 帧的动画或大数据量表格渲染
- 修改局部内容时，需重绘整个相关区域（例如移动小球，要先清掉旧位置，再画新位置）
- 常用优化方式包括：
requestAnimationFrame驱动平滑动画、用离屏 canvas 预合成复杂图形、多层 canvas 分离 UI 与动态内容
基础绘图能力覆盖常见需求
拿到上下文后，几行代码就能实现丰富效果：
- 矩形：
fillRect(x,y,w,h)（填充）、strokeRect(x,y,w,h)（描边） - 路径：
beginPath()→moveTo()→lineTo()→stroke()或fill() - 圆弧：
arc(cx,cy,r,sAngle,eAngle)，角度单位为弧度（如Math.PI * 2表示整圆） - 文本：
font设置字体，fillText("text",x,y)绘制文字 - 图像：
drawImage(img,x,y)或drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)实现裁剪缩放
