HTML5Canvas绘图入门教程

本文深入解析HTML5 Canvas绘图的核心机制与常见陷阱，强调Canvas并非声明式HTML渲染，而是一个依赖状态的JavaScript 2D绘图引擎：必须通过getContext('2d')获取上下文对象才能开始绘图，漏掉这一步所有操作将静默失败；fillRect和strokeRect是独立快捷命令，但路径绘制必须严格遵循beginPath→moveTo/lineTo→stroke/fill流程，否则导致图形意外叠加；clearRect仅清像素不重置状态，真正“重启”画布需用canvas.width = canvas.width。掌握这些底层逻辑，才能避开90%的初学者绘图故障。

Canvas 绘图不是“写 HTML 标签”而是调用 JavaScript 2D 渲染上下文，不理解 getContext('2d') 就没法开始。

怎么拿到绘图用的上下文对象

必须先用 document.getElementById() 拿到 元素，再调它的 getContext('2d') 方法——漏掉这一步，所有绘图命令都会静默失败。

• 确保 元素已加载完成（放在 底部，或监听 DOMContentLoaded）
• getContext('2d') 返回的是一个独立的绘图状态对象，不是 DOM 元素本身
• 如果传错参数（比如写成 'webgl' 却没用 WebGL API），会返回 null，后续调用方法会报 TypeError: Cannot read property 'xxx' of null

画矩形：fillRect 和 strokeRect 的区别

fillRect(x, y, width, height) 填充实心矩形；strokeRect(x, y, width, height) 只描边。它们都不受路径（path）影响，是独立的快捷命令。

• 坐标 (x, y) 是左上角点，不是中心点
• 默认填充色是黑色，描边色也是黑色，但填充色和描边色互不影响：ctx.fillStyle = 'red' 不改变 ctx.strokeStyle
• 如果同时调用了 fillRect 和 strokeRect 在同一区域，描边会盖在填充之上——想让描边居中，得手动调整宽度（比如用 lineWidth = 2 时，实际占 1px 向外、1px 向内）

画线段和路径：beginPath 到 stroke 的完整链路

画折线、多边形、曲线必须走路径流程：beginPath() → moveTo() / lineTo() / arc() 等 → stroke() 或 fill()。漏掉 beginPath() 会导致新图形叠加在旧路径上，反复调用 stroke() 会越画越粗。

• moveTo(x, y) 抬笔移动起点，lineTo(x, y) 落笔画线——不调 moveTo 直接 lineTo，会从 (0, 0) 开始连过去
• closePath() 自动连线回起点，但不会自动绘制，仍需 stroke() 或 fill()
• 路径一旦 stroke() 或 fill()，就清空了；再次绘制需重新 beginPath()

为什么 clearRect 不总能清干净

clearRect(x, y, width, height) 只清除指定矩形区域的像素，不是重置整个画布状态。它不会重置颜色、线宽、变换矩阵等设置。

• 如果之前设置了 ctx.globalAlpha = 0.5，clearRect 后新画的内容依然半透明
• 要彻底“重来”，常用做法是用 canvas.width = canvas.width（重设宽高会清空像素并重置所有上下文状态）
• 但注意：该操作会丢弃所有已应用的 transform、裁剪区（clip()）、阴影设置等——不是万能刷新键

Canvas 是状态机，不是声明式绘图；每一步都依赖前一步的状态。最常被忽略的，是忘记重置 beginPath() 和误以为 clearRect() 能还原上下文。

本篇关于《HTML5Canvas绘图入门教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！