Canvas是HTML5位图绘图接口，需通过getContext('2d')操作，正确设置width/height属性并适配dpr，掌握路径绘制、图像加载（drawImage）与像素操作（getImageData/putImageData）。
Canvas 是 HTML5 提供的位图绘图接口，核心在于通过 JavaScript 操作 <canvas></canvas> 元素的 2D 渲染上下文（getContext('2d')），实现矢量绘制、图像处理和像素级控制。掌握基础绘图与像素操作，是做图表、游戏、滤镜、实时图像处理的前提。
获取上下文并设置画布尺寸
Canvas 的实际绘制区域由 width 和 height 属性决定（非 CSS 样式），必须显式设置，否则默认为 300×150 像素，且可能被拉伸失真。
常见错误：只用 CSS 设置大小，未改 canvas 元素属性 → 图形模糊、坐标偏移。
- 正确做法：先设
canvas.width/canvas.height，再获取上下文 - 推荐适配高清屏：
const dpr = window.devicePixelRatio || 1;，将 canvas 宽高乘以 dpr，并用 CSS 缩放回原始尺寸 - 示例：
canvas.width = 600 * dpr; canvas.height = 400 * dpr; ctx.scale(dpr, dpr);
基础 2D 绘图：路径、样式与变换
所有矢量绘图都基于路径（path）：定义形状轮廓 → 设置样式 → 填充或描边。
立即学习“Java免费学习笔记（深入）”；
-
路径操作：用
beginPath()开始，moveTo()、lineTo()、arc()、rect()等构建，closePath()自动连线闭合 -
绘制控制：用
fill()填充内部，stroke()描边外轮廓；两者可独立调用 -
样式设置：如
ctx.fillStyle = '#ff6b6b'; ctx.strokeStyle = 'rgba(0,0,0,0.8)'; ctx.lineWidth = 2; -
坐标变换：支持
translate()、rotate()、scale()，用save()/restore()保存恢复状态，避免影响后续绘制
图像加载与绘制：drawImage 的三种用法
drawImage() 是绘制图像的核心方法，支持三种签名，灵活控制源区域、目标尺寸和缩放：
-
drawImage(img, x, y)：在画布 (x,y) 处绘制整张图像 -
drawImage(img, x, y, width, height)：绘制并缩放到指定宽高 -
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)：从源图 (sx,sy) 裁剪 sw×sh 区域，绘制到画布 (dx,dy) 并缩放为 dw×dh
注意：图像需加载完成后再绘制（监听 img.onload），否则无效果；跨域图片需设置 img.crossOrigin = 'anonymous' 才能读取像素。
像素级操作：getImageData 与 putImageData
通过 getImageData() 获取指定矩形区域的像素数组（RGBA 四字节/像素，一维 Uint8ClampedArray），修改后用 putImageData() 写回画布。
- 获取数据：
const imageData = ctx.getImageData(x, y, width, height); - 访问像素：
const data = imageData.data; // length = width × height × 4，索引i对应第i/4个像素，data[i]是 R，data[i+1]是 G，data[i+2]是 B，data[i+3]是 A（0–255） - 灰度示例：
for (let i = 0; i - 写回画布：
ctx.putImageData(imageData, x, y);（注意：不触发重绘，直接更新像素）
⚠️ 性能提示：频繁读写像素很慢，尽量批量处理；对大图做滤镜时，考虑使用 OffscreenCanvas 或 Web Workers 分离主线程。
