Canvas 线条与线条间接合处的样式
多次调用 lineTo() 方法绘制多个线条组成路径时，我们会发现线条与线条之间接合处的样式有时候不一样
Canvas 把这个接合处的样式称之为 lineJoin 并提供了 lineJoin 属性用于设置它
lineJoin 属性
ctx.lineJoin 是用来设置 2 个长度不为 0 的相连部分 ( 线段，圆弧，曲线 ) 如何连接在一起的属性
长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略
语法
ctx.lineJoin = "bevel"; ctx.lineJoin = "round"; ctx.lineJoin = "miter";
| 值 | 说明 |
|---|---|
| round | 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度 |
| bevel | 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角 |
| miter | 默认，通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域 这个设置可以通过 miterLimit 属性设置 |
注意
如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域
范例
下面的代码使用 lineJoin 属性设置线段连接处的样式
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="300" height="150"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.lineJoin = "round"; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(200, 100); ctx.lineTo(250,10); ctx.stroke(); </script>
运行结果如下
范例 2
我们可以使用 for 循环绘制了 3 条不同的路径，演示 lineJoin 属性 3 种不同的设置
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="300" height="150"> </canvas> <script> var c = document.getElementById("canvas-2"); var ctx = c.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(50,50+i*40); ctx.lineTo(25,45+i*40); ctx.lineTo(75,10+i*40); ctx.lineTo(115,45+i*40); ctx.lineTo(155,10+i*40); ctx.stroke(); } </script>
运行结果如下