只不过取值为 miter 时，还可以指定一个 miterLimit 属性，表示连接点（矩形的斜线）计算方式。斜线的长度与二分之一线宽的比值。如下图所示：

其实这个斜线的长度就是一个 直角三角形 的边长。

function drawScreen () { ctx.strokeStyle = "#f9f"; ctx.lineWidth = 30; ctx.beginPath(); ctx.moveTo(10,60); ctx.lineTo(140,60); ctx.lineTo(140,280); ctx.stroke(); ctx.beginPath(); ctx.moveTo(250,100); ctx.lineTo(450,80); ctx.lineTo(300,280); ctx.stroke(); }

从上面的示例效果中可以看出，如果两个线段夹角很小的话，那么斜线的长度有可能会变得非常长。如果斜线太长，其比值（也就是斜线长度除以二分之一的线宽）就超过了你所指定的 miterLimit 值，这个时候浏览器就会以 bevel 的方式来处理两个线段的连接点。

比如， miterLimit 默认值为 10 ， 如果 2 条线相交之后 miter 的值小于这个 miterLimit 值， 则 ctx.lineJoin = 'miter' 将自动转换成 ctx.lineJoin = 'bevel' 。

小结一下

CanvasRenderingContext2D 对象中与线段绘制相关的属性，也就是我们今天所说线型相关的属性：

属性 描述 取值 默认值 lineWidth 设置线段宽度 非零的正数 1.0 lineCap 控制线段端点如何绘制 butt 、 round 、 square butt lineJoin 控制线段连接点如何绘制 miter 、 round 、 bevel miter miterLimit 斜线长度与二分之一线宽的比值 非零的正数 10.0

具体的效果：

实例：绘制五角星

最后来安利一个如何使用路径（线段）绘制一个五角星。绘制一个五角星，其最要的是分析五角星的各个顶点的坐标，要得到这五个顶点坐标，要使用到一定的数学知识（其实在Canvas中，数学知识还是很重要的，后面我们会专门来聊这部分内容）。但是浏览器中的坐标系统和数学中的坐标系统有点不一样，具体有何不同，可以阅读前面分享的Cavnas坐标系统一文。

那我们还是回到怎么画五角星这里。在具体绘制五角星之前，先上一张图，这张图能更好的帮助我们分析如何绘制五角星。别的不说，先看图：

上图已经告诉我们怎么通过数学公式得到五角星的五个坐标点：

五角星五个顶点，相连两个顶点之间的夹角为( 360° / 5 = 72° )，但浏览器中是使用弧度计算角度的，所以需要将角度转换为弧度： Math.sin(72 / 180) * Math.PI 五角星由内部一个小圆和外部一个大圆构成 以五角星中心为坐标原点，右上角为第一个点，逆时针旋转，外层圆初始角度为 18° ，内部小圆初始角度为 18°+36°=54° 不同圆下一个角度都相差 72°

看实例代码：

function drawScreen () { ctx.strokeStyle = "red"; ctx.lineWidth = 10; ctx.beginPath(); // i => 五角星五个点 // 100 => 外圆半径 // 50 => 内圆半径 // 200, 100 => 圆心位置 for (var i = 0; i < 5; i++) { ctx.lineTo( Math.cos( (18 + 72*i)/180 * Math.PI ) * 100 + 200, -Math.sin( (18 + 72*i)/180 * Math.PI ) * 100 + 120 ); ctx.lineTo( Math.cos( (54 + 72*i)/180 * Math.PI ) * 50 + 200, -Math.sin( (54 + 72*i)/180 * Math.PI ) * 50 + 120 ); } ctx.closePath(); ctx.stroke(); }

效果如下：

可以将上面的代码封装一下，根据上面的示例，我们可以提取绘制五角星的五个参数：

ctx ：Canvas里绘图环境 R ：大圆半径 r ：小圆半径 x,y ：圆心坐标值

将它封装成一个 drawStar() 函数，并且把这个五个参数传给这个函数：

function drawStar(ctx, x, y, R, r) { ctx.beginPath(); for (var i = 0; i < 5; i++) { ctx.lineTo( Math.cos((18 + i * 72) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y ); ctx.lineTo( Math.cos((54 + i * 72) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y ); } ctx.closePath(); ctx.stroke(); }

然后在直接调用这个已封装的函数：

function drawScreen () { ctx.strokeStyle = "red"; ctx.lineWidth = 10; drawStar(ctx, 200, 120, 100, 50); }

最终效果是一样的：

到这里，是不是想到可以绘制一面中国国旗的效果，那么还需要一个旋转的功能。

将上面的封装函数，添加一个 rotation 参数：

function drawStar(ctx, x, y, R, r， rotation = 0) { ctx.beginPath(); for (var i = 0; i < 5; i++) { ctx.lineTo( Math.cos ( (18 + i*72 - rotation) / 180 * Math.PI ) * R + x, -Math.sin( (18 + i*72 - rotation) / 180 * Math.PI ) * R + y ); ctx.lineTo( Math.cos ( (54 + i*72 - rotation) / 180 * Math.PI ) * r + x, -Math.sin( (54 + i*72 - rotation) / 180 * Math.PI ) * r + y ); } ctx.closePath(); ctx.stroke(); }

那具体怎么画出一面 中国国旗的效果 ，自己动手吧。

总结

这篇主要介绍了Canvas中线型的一些属性，比如说通过 lineWidth 来控制线段的粗线， lineCap 来控制线段端点的绘制方式， lineJoin 控制线段连接处的绘制方式。最后绘制了一个五角星的实例，当然还提到了绘制国旗，在这个我们用到了一个 fillRect(x,y,width,height) 的方法，绘制了矩形（当然，我们使用路径也可以绘制一个矩形）。使用这个方法绘制矩形是如此的方便与简单，那么怎么绘制矩形呢？我们将在下一节上来聊。如果感兴趣的话，欢迎持续关注相关更新。

大漠