当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5 Canvas画图基础：矩形圆形路径教程

HTML5 Canvas画图基础：矩形圆形路径教程

2026-04-02 18:43:45 0浏览收藏

本文深入浅出地讲解了HTML5 Canvas中三种核心绘图方式的差异与要点：矩形绘制最简单，直接用fillRect()和strokeRect()即可，无需路径管理；而画圆必须严格遵循“beginPath() → arc() → fill()/stroke()”流程，避免因遗漏beginPath()导致路径累积的常见错误；自定义图形则依赖moveTo()、lineTo()和closePath()的手动路径构建，并强调路径状态（如是否重置、是否闭合、是否设置样式）对渲染结果的决定性影响——掌握这些底层逻辑，才能真正摆脱“画不出”“连错线”“填不上色”的初学困境。

html5canvas怎么画图形_矩形圆形路径绘制基础操作【教程】

用 `fillRect()` 和 `strokeRect()` 画矩形最直接

Canvas 绘制矩形不需要路径操作，两个 API 就够用：fillRect() 填充实心矩形，strokeRect() 只描边。它们参数统一：左上角 x、y，宽 width、高 height。

注意：坐标原点在 canvas 左上角，y 增大是向下，不是数学坐标系；且这些方法不依赖当前路径，调用后也不会改变路径状态（比如不会自动 beginPath()）。

如果先调了 fill() 或 stroke() 再画矩形，不影响矩形渲染——因为矩形绘制是独立的
多次调用 fillRect() 不会累积路径，也不需要手动 beginPath()
想让矩形带圆角？得换 rect() + arcTo() 或用 CSS border-radius 配合离屏 canvas，原生矩形 API 不支持

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4a90e2';
ctx.fillRect(10, 20, 120, 80); // 实心蓝矩形
ctx.strokeStyle = '#d32f2f';
ctx.lineWidth = 3;
ctx.strokeRect(50, 60, 100, 40); // 红边框矩形

画圆形必须走路径：用 `arc()` 而不是 `circle()`

Canvas 没有 drawCircle() 这种方法。arc() 是唯一可靠画圆/圆弧的方式，它本质是画一段路径，所以必须配合 beginPath()、fill() 或 stroke() 才能显形。

常见错误是漏掉 beginPath()，导致新圆叠加在旧路径上，再调 fill() 就把之前所有未闭合路径一起填了；或者误用 arcTo()（它只适用于已存在两条切线的场景，不适合画标准圆）。

arc(x, y, radius, startAngle, endAngle, anticlockwise)：角度单位是弧度，不是度数
画整圆要确保 endAngle - startAngle === 2 * Math.PI，否则只是圆弧
顺时针画圆设 anticlockwise = false（默认值），但填充方向不影响视觉结果

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 40, 0, Math.PI * 2); // 圆心(150,100)，半径40，整圈
ctx.fillStyle = '#7c4dff';
ctx.fill();

`moveTo()` + `lineTo()` + `closePath()` 是自定义路径的核心组合

所有非矩形、非圆的图形（比如三角形、五角星、不规则多边形）都得靠这个组合手绘路径。它模拟的是“抬笔→落笔→连线→封口”的过程，每步都影响当前路径状态。

最容易出错的是忘记 beginPath() —— 如果前面画过别的图形且没重置路径，新 moveTo() 会从上一个路径终点开始连，而不是你预期的起点；还有就是 closePath() 并不自动 stroke() 或 fill()，只是补一条线回起点。

moveTo(x, y) 抬笔移到某点，不画线
lineTo(x, y) 落笔画直线到该点
closePath() 自动加一条线回到路径起始点（即第一次 moveTo() 的位置）
路径一旦 fill() 或 stroke()，就清空了，后续操作需重新 beginPath()

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(150, 150);
ctx.closePath(); // 自动连回 (200, 50)
ctx.fillStyle = '#ff6f00';
ctx.fill();

路径绘制后不显示？先查这三件事

Canvas 路径绘制是“声明式”的：定义好路径，再调 fill() 或 stroke() 才真正渲染。很多初学者卡在这一步，以为画完 arc() 或 lineTo() 就该看见图形了。

是否漏了 beginPath()？尤其在循环画多个图形时，不重置路径会导致意外连接
是否调用了 fill() 或 stroke()？只定义路径不会显示任何东西
是否设置了 fillStyle 或 strokeStyle？默认是黑色，但如果 canvas 背景也是深色，可能看不清；透明色或 'transparent' 也会导致“看不见”

路径本身不可见，没有“轮廓线”概念；stroke() 的宽度受 lineWidth 控制，但它的绘制位置是路径中心线，不是内侧或外侧——这点在画细边框时容易偏移一像素。

今天关于《HTML5 Canvas画图基础：矩形圆形路径教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！