绘制矩形和路径
使用 fillRect、strokeRect 和路径命令绘制形状
绘制矩形和路径 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
画布设置
<canvas> 元素需要显式设置宽度和高度属性，以确定像素尺寸。获取 2D 上下文：const ctx = canvas.getContext("2d")。所有绘图操作都使用这个上下文对象。
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect 与 strokeRect
无需路径即可绘制矩形：ctx.fillRect(x, y, width, height) 用于填充实心矩形。ctx.strokeRect(x, y, width, height) 用于绘制轮廓。绘制前请设置 ctx.fillStyle 和 ctx.strokeStyle。
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);使用 clearRect 擦除
ctx.clearRect(x, y, width, height) 会将像素清除为透明状态。请在重新绘制前用它擦除区域——这对动画至关重要：清空画布，然后在每一帧中以新的位置重新绘制所有内容。
路径基础
路径用于定义形状。开始：ctx.beginPath()。移动到起点：ctx.moveTo(x, y)。绘制线段：ctx.lineTo(x, y)。闭合：ctx.closePath()。渲染：ctx.fill() 或 ctx.stroke()。
绘制线条
一个三角形：beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke()。closePath 会自动绘制回到起点的最后一条线段——无需重复第一个坐标。
弧线与圆
ctx.arc(cx, cy, radius, startAngle, endAngle)。绘制完整的圆：ctx.arc(100, 100, 50, 0, Math.PI * 2)。角度以弧度表示。0 表示右侧（3 点钟方向）；π 表示左侧（9 点钟方向）。
贝塞尔曲线
ctx.quadraticCurveTo(cpx, cpy, x, y) 使用一个控制点绘制二次贝塞尔曲线。ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 使用两个控制点绘制三次贝塞尔曲线，从而形成平滑曲线。
填充样式
fillStyle 接受颜色字符串、线性渐变（ctx.createLinearGradient()）、径向渐变（ctx.createRadialGradient()）和图案（ctx.createPattern(image, repeat)）。使用超越纯色的复杂填充，可以实现丰富的视觉效果。
线条样式
控制线条外观：ctx.lineWidth（像素宽度）、ctx.lineCap（"butt"、"round"、"square"）、ctx.lineJoin（"miter"、"round"、"bevel"），以及用于绘制不同长度交替虚线的 ctx.setLineDash([5, 3])。
保存与恢复
ctx.save() 会将当前状态（fillStyle、strokeStyle、lineWidth、变换、裁剪区域）压入堆栈。ctx.restore() 会将其弹出。请将复杂的绘图操作包裹在保存与恢复之间，避免无关绘图操作之间相互影响样式。
坐标系
画布原点（0,0）位于左上角。X 向右递增；Y 向下递增。变换（平移、旋转、缩放）会改变坐标系，使您能够相对于局部原点绘图，而无需手动计算绝对位置。
知识检查
在绘制路径之前，ctx.beginPath() 有什么作用？
总结
画布 2D 绘图使用上下文方法处理矩形（fillRect、strokeRect）、路径（beginPath、moveTo、lineTo、arc、bezierCurveTo）、样式（fillStyle、strokeStyle、lineWidth）和状态管理（保存与恢复）。掌握这些基本图元后，您就能从简单的构件构建复杂图形。
常见问题解答
「绘制矩形和路径」课时是免费的吗？
是的 — 「绘制矩形和路径」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「绘制矩形和路径」这节课中我会学到什么？
使用 fillRect、strokeRect 和路径命令绘制形状 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「绘制矩形和路径」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。