转折点样式

转折点分成两类：

一种是线段间的

一种是首末两端的

两端样式

有三个可选值：

• butt, 以方形结束
• round, 以圆形结束
• square, 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

如下所示：

连接点样式

三个值：round, bevel, miter。默认miter。

有拐角才会出现。平直的线之间不会出现。

ctx.lineWidth = 10;

["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
});