Canvas画布基础操作教程：JS实现控制方法

本文深入解析Canvas绘图的核心机制，强调getContext('2d')是激活画布绘图能力的绝对前提——没有它，canvas只是空容器；详解fillStyle与strokeStyle作为上下文状态的持续影响性及手动重置必要性；揭示getImageData().data按RGBA四字节排列的底层逻辑与遍历陷阱；并点明Canvas无绘制历史、纯像素渲染的本质，引出设备像素比（devicePixelRatio）在高清屏适配中的关键作用——掌握这些，才能真正跨越“能画”到“画准、画清、画稳”的分水岭。

Canvas 的基础不是“画布对象本身”，而是 getContext('2d') 返回的渲染上下文 —— 没调用它， 元素只是个空容器，什么也画不了。

为什么 getContext('2d') 是必调用的第一步

HTML 中的 只定义了位图尺寸，不自带绘图能力。必须通过 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 操作，直到被显式修改：

• 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），这点容易被忽略，尤其在高清屏上画线发虚或文字模糊时，问题根源往往就在这里。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~