CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

参见 Canvas Tutorial 中的 Applying styles and color 章节。

语法

ctx.lineJoin = "bevel";
ctx.lineJoin = "round";
ctx.lineJoin = "miter";

选项

此属性有3个值： round, bevel and miter。默认值是 miter。注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果，因为在那种情况下不会出现连接区域。

round
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
bevel
在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
miter
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

示例

使用 lineJoin 属性

这是一段使用 lineJoin 属性的简单的代码片段。

HTML

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

JavaScript

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

ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(300,0);
ctx.stroke();

修改下面的代码并在线查看 canvas 的变化：

lineJoin 例子

下面的例子绘制了3条不同的路径，演示 lineJoin 属性3种不同的设置。

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;

for (var i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  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();
}

ScreenshotLive sample

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.lineJoin		 Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
  • 基于WebKit- 和 Blink- 的浏览器中， 实现了一个不标准的并且不赞成使用的方法 ctx.setLineJoin() 。

参见