CanvasRenderingContext2D：lineJoin 属性

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.lineJoin属性确定用于连接两条线段在交汇处的形状。

此属性在两个连接的线段具有相同方向的任何位置均无效，因为在这种情况下不会添加连接区域。长度为零（即所有端点和控制点都在完全相同的位置）的退化线段也会被忽略。

注意：可以使用stroke()、strokeRect()和strokeText()方法绘制线条。

值

此属性有三个可能的值："round"、"bevel"和"miter"。默认值为"miter"。

Three horizontal zigzag lines with round, bevel, and miter values, shown from top to bottom respectively.

"round"

通过填充以连接线段的公共端点为中心的额外圆盘扇区来圆化形状的角。这些圆角的半径等于线宽。

"bevel"

在连接线段的公共端点以及每个线段的单独外部矩形角之间填充额外的三角形区域。

"miter"

连接的线段通过扩展其外部边缘以连接到一个点来连接，从而填充额外的菱形区域。此设置受miterLimit属性的影响。默认值。

示例

更改路径中的连接

此示例将圆形线连接应用于路径。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

结果

线连接的比较

以下示例绘制了三个不同的路径，演示了三个lineJoin选项中的每一个。

js
const ctx = document.getElementById("canvas").getContext("2d");
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();
});

规范

规范
HTML 标准
# dom-context-2d-linejoin-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

  • 在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了非标准且已弃用的方法ctx.setLineJoin()。

另请参阅