Canvas学习Part4 - lineCap、lineJoin 、lineWidth 、miterLimit

 lineCap

用法：设置或返回线条末端线帽的样式。

注意："round" 和 "square" 值会使线条略微变长。

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

 lineJoin 属性

用法：设置或返回所创建边角的类型，当两条线交汇时。

值	描述
bevel	创建斜角。
round	创建圆角。
miter	默认。创建尖角。

lineWidth 属性

用法：设置或返回当前线条的宽度，以像素计。

miterLimit 属性

用法：设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

• 边角的角度越小，斜接长度就会越大。
• 为了避免斜接长度过长，我们可以使用 miterLimit 属性。
• 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（Fig 3）：

 lineCap基本用法

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="butt";
ctx.strokeStyle="#F69";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap="round";
ctx.strokeStyle="#F60";
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap="square";
ctx.strokeStyle="#F16";
ctx.moveTo(20,60);
ctx.lineTo(200,60);
ctx.stroke();
</script>

 lineJoin基本用法 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="#F69";
ctx.lineJoin="square";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,90);
ctx.stroke();
</script>

miterLimit 基本用法

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<p>试图设置　miterLimit 4(然后,斜接长度将超过斜接限制),当行满足它将显示为　lineJoin =“bevel”。</p>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
</script>