第 5 课 6 / 19 ｜ 编码：L05-09
核心知识

路径、线段与圆弧

上一页用矩形画出了海报的背景和边框。如果还想添加圆弧装饰或折线，该怎样画？下面从这两种图形开始。

<style>
body {
  font: 20px/1.5 sans-serif;
  padding: 16px;
  color: #20354e;
}
button, input, select { font: inherit; }

</style>
<canvas id="poster" width="640" height="360" style="max-width:100%;height:auto;border:1px solid #aaa">黄梅戏分享会海报</canvas>
<script>
const canvas = document.querySelector('#poster');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(520, 90, 42, Math.PI / 6, Math.PI * 7 / 6);
ctx.fill();
</script>

直线示例：先记录路径，再描边

<canvas id="lines" width="360" height="200"
        style="max-width:100%;height:auto;border:1px solid #aaa">
  一条由横线和竖线组成的折线
</canvas>
<script>
const ctx = document.querySelector('#lines').getContext('2d');
ctx.strokeStyle = '#177f73';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(240, 40);
ctx.lineTo(240, 140);
ctx.stroke();
</script>