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();
}
Screenshot | Live sample |
---|---|
![]() |
规范描述
Specification |
---|
HTML Standard # dom-context-2d-linejoin-dev |
浏览器兼容性
BCD tables only load in the browser