Canvas miterLimit 属性 - Canvas 基础教程

多次调用 lineTo() 方法绘制多个线条组成路径时，如果使用默认的线条接合样式，或者使用属性 lineJoin="miter" 将接合样式设置为 meter 时会发现

线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大

第一个接合处的夹角比较小，接合处会比较尖，交点距离比较大第二个接合处的夹角比较大，接合处就比较平缓

为了避免夹角比较小时，接合处比较长，我们可以使用 miterLimit 属性设置的短一点

miterLimit 属性

miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel

当获取属性值时，会返回当前的值 ( 默认值是10.0 )
当给属性赋值时， 0、负数、 Infinity 和 NaN 都会被忽略，除此之外都会被赋予一个新值

语法

ctx.miterLimit = value;

值	说明
value	设置接合处限制比例的的数字。 0、负数、Infinity 和 NaN 都会被忽略

只有当 lineJoin 显示为 "miter" 时，miterLimit 才有效

如果接合处的长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示

范例

下面的代码使用 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 = "miter";

ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(20,100);
ctx.lineTo(30,20);
ctx.lineTo(60,150);
ctx.lineTo(150,100);
ctx.stroke();

ctx.miterLimit = 5;
ctx.beginPath();
ctx.moveTo(200+10,10);
ctx.lineTo(200+20,100);
ctx.lineTo(200+30,20);
ctx.lineTo(200+60,150);
ctx.lineTo(200+150,100);
ctx.stroke();
</script>

运行结果如下