HTML5Canvas绘图教程：画矩形圆详解

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《HTML5 Canvas画图教程：矩形圆形绘制指南》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

fillRect()和strokeRect()不依赖路径，但混用路径方法时需先beginPath()；画圆必用arc()且角度单位为弧度；清除画布需适配像素比；样式设置必须在绘制前且无继承。

用 fillRect() 和 strokeRect() 画矩形，别漏掉 beginPath()

Canvas 绘图不是“设置属性后自动渲染”，而是基于路径（path）的命令式操作。画矩形看似简单，但新手常因忽略上下文状态导致颜色/线宽不生效或重叠渲染。

• fillRect(x, y, width, height) 直接填充，不依赖路径，也不受 beginPath() 影响
• strokeRect(x, y, width, height) 同理，直接描边，跳过路径管理
• 但如果你混用路径类方法（比如后面画圆），必须在调用 fillRect() 前确认当前没有未闭合路径，否则可能意外填充不该填的区域
• 坐标 (x, y) 是矩形左上角，不是中心点 —— 这和 CSS 的 transform-origin 或 SVG 的 cx/cy 习惯不同，容易偏移

画圆形必须用 arc()，startAngle 和 endAngle 单位是弧度

Canvas 没有 drawCircle() 这种快捷函数。所有圆/圆弧都靠 arc(x, y, radius, startAngle, endAngle, anticlockwise)，而角度单位是弧度，不是度数 —— 这是绝大多数人第一次画不出圆的直接原因。

• 完整圆：用 startAngle = 0、endAngle = 2 * Math.PI，别写 360
• 画实心圆要配 fill()，且必须在 arc() 后立即调用；如果之前有未闭合路径，fill() 可能连带填充其他部分
• 推荐固定写法：

  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fill();

• anticlockwise 设为 true 会反转绘制方向，影响 fillRule（极少用，一般保持默认 false）

清除画布别只靠 clearRect()，注意像素比缩放后的失真

用 clearRect(0, 0, canvas.width, canvas.height) 看似清空，但如果 Canvas 被 CSS 缩放过（比如设了 style="width: 400px; height: 300px"），实际渲染会模糊或留残影。

• 根本原因是：Canvas 的 width/height 属性是绘图缓冲区像素数，而 CSS width/height 是显示尺寸。二者不一致就会拉伸
• 正确做法是先读取 canvas.clientWidth 和 canvas.clientHeight，再按设备像素比（window.devicePixelRatio）重设 canvas.width/canvas.height
• 清除前建议统一重置状态：

  ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵
  ctx.clearRect(0, 0, canvas.width, canvas.height);

颜色和样式必须在绘制命令前设置，且无继承机制

Canvas 是“状态机”模型：fillStyle、strokeStyle、lineWidth 等都是全局状态，一旦设置就持续生效，直到被下一次赋值覆盖。它不像 SVG 或 DOM 那样有样式继承链。

• 常见错误：先画矩形，再改 fillStyle，结果新颜色对已绘制内容无效
• fillStyle 支持颜色字符串（"#ff0"）、rgb()、rgba()，也支持 CanvasGradient 和 CanvasPattern，但不能传 CSS 变量或 class 名
• 每次切换绘制类型（填充 → 描边）时，务必确认当前 fillStyle 或 strokeStyle 是你想要的值，尤其在循环绘制不同图形时
• 没有“恢复上一个样式”的内置方法，如需频繁切换，建议手动缓存：const oldFill = ctx.fillStyle;，用完再赋回

Canvas 的“基础”背后全是状态陷阱。最易忽略的不是怎么画，而是什么时候该 beginPath()、什么时候该 setTransform(1,0,0,1,0,0)、以及为什么明明改了 fillStyle 却没变色 —— 这些问题全藏在上下文状态里。

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