绘制形状和路径
渲染矩形、弧线和自定义路径。
绘制形状和路径 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
先从矩形开始
矩形有专用的快捷方法：fillRect、strokeRect 和 clearRect。每个方法都接受 (x, y, width, height)。
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);开始绘制路径
除了矩形之外的图形都需要构建路径。调用 beginPath() 开始一条新路径，添加线段，然后调用 stroke() 或 fill()。
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo 和 lineTo
moveTo(x, y) 会抬起画笔并将其放置到指定位置，不进行绘制。lineTo(x, y) 会从当前点向新点绘制直线。
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();闭合路径
closePath() 会向起点绘制一条线，从而完成轮廓。它对于多边形很有用。
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();填充形状
fill() 会使用 fillStyle 填充当前路径的内部。您可以同时填充并描边同一条路径。
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();使用 arc 绘制圆形
arc(x, y, radius, startAngle, endAngle) 会绘制圆弧。角度以弧度表示。完整的圆从 0 延伸到 2 * Math.PI。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();部分圆弧和扇形
使用起始角度和结束角度绘制楔形。结合使用 lineTo 将线绘制到中心，就可以得到扇形。
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();二次曲线和贝塞尔曲线
quadraticCurveTo(cpx, cpy, x, y) 和 bezierCurveTo(...) 使用控制点绘制平滑曲线。
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();线条样式
使用 lineWidth、lineCap（butt/round/square）、lineJoin（miter/round/bevel）和 setLineDash 控制线条外观。
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();填充规则
fill() 接受 "nonzero"（默认值）或 "evenodd"，以决定如何填充重叠的子路径——这对于带孔的形状很有用。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut使用渐变进行填充
使用 createLinearGradient 创建渐变，添加颜色色标，然后将其赋给 fillStyle。
const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);快速检查
测试您对路径的理解。
回顾：形状和路径
现在您可以绘制矩形，使用 beginPath/moveTo/lineTo/closePath 构建路径，使用 arc 绘制圆形，添加曲线，为线条设置样式，并使用颜色或渐变进行填充。接下来将学习图像和文本。
常见问题解答
「绘制形状和路径」课时是免费的吗？
是的 — 「绘制形状和路径」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「绘制形状和路径」这节课中我会学到什么？
渲染矩形、弧线和自定义路径。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「绘制形状和路径」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。