Canvas绘图必先调用getContext('2d')获取渲染上下文，否则canvas仅为无绘图能力的空容器；fillStyle和strokeStyle是上下文状态，影响后续所有填充/描边操作且不自动重置；getImageData().data按RGBA每像素占4字节。
Canvas 的基础不是“画布对象本身”，而是 getContext('2d') 返回的渲染上下文 —— 没调用它，<canvas></canvas> 元素只是个空容器，什么也画不了。
为什么 getContext('2d') 是必调用的第一步
HTML 中的 <canvas width="400" height="300"></canvas> 只定义了位图尺寸，不自带绘图能力。必须通过 JavaScript 获取 2D 渲染上下文，才能调用 fillRect()、strokePath() 等方法：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // ✅ 必须这行
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // ✅ 才能生效
常见错误包括：
- 忘了调用
getContext('2d')，直接对canvas调fillRect()→ 报错：canvas.fillRect is not a function - 在 DOM 尚未加载完成时获取 canvas（比如 script 放在 head 里）→
canvas为null→getContext报错 - 传错参数，如
getContext('webgl')但没处理 WebGL 不可用的降级逻辑
fillStyle 和 strokeStyle 的作用范围与重置时机
这两个属性不是“全局开关”，而是当前上下文的状态，会影响之后所有 fill / stroke 操作，直到被显式修改：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“Java免费学习笔记（深入）”；
-
fillStyle控制fillRect()、fill()等填充操作的颜色或样式（支持rgba()、gradient、pattern） -
strokeStyle同理控制strokeRect()、stroke()的描边颜色 - 它们不会自动恢复成默认值；哪怕只画一次红色矩形，后续所有
fill()都会继续用红色，除非你手动设回'#000'或其他值 - 频繁切换样式时，建议封装成函数或用
ctx.save()/ctx.restore()配合状态栈管理
像素操作：为什么 getImageData() 返回的数据要乘 4
ctx.getImageData(x, y, width, height) 返回的是 ImageData 对象，其 .data 是 Uint8ClampedArray，按 RGBA 顺序每像素占 4 字节：
- 索引
i对应 R 值，i+1是 G，i+2是 B，i+3是 A（透明度） - 所以遍历像素时，循环步长是 4：
for (let i = 0; i - 若漏掉 ×4，会把 G 当 R、B 当 G……整张图变色甚至崩溃
- 写入时也必须严格按此顺序赋值，浏览器不校验格式，出错只表现为视觉异常
Canvas 的核心约束在于：它不保留绘制历史，所有内容都是光栅化后的像素。这意味着缩放、重绘、响应式适配都得手动处理设备像素比（window.devicePixelRatio），这点容易被忽略，尤其在高清屏上画线发虚或文字模糊时，问题根源往往就在这里。
