Canvas miterLimit 属性

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

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

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

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

miterLimit 属性

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

  1. 当获取属性值时, 会返回当前的值 ( 默认值是10.0 )
  2. 当给属性赋值时, 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>

运行结果如下


Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.