线条属性
1. 前言
@H_502_9@线条的属性有五个，我们前面小节已经学习了两个属性，分别是表示路径颜色的
strokeStyle 和表示路径宽度的 linewidth，今天我们继续学习剩下的三个属性，lineCap 属性、lineJoin 属性和 miterLimit 属性。
2. 线条属性汇总
-
@H_502_9@linewidth 线条宽度属性
linewidth 定义线的宽度（默认值为1.0）。 -
@H_502_9@strokeStyle 线条描边属性
strokeStyle 定义线和形状边框的颜色和样式。 - @H_502_9@lineCap 线条帽子属性 @H_502_9@lineCap 定义上下文中线的端点，可以有以下3个值，butt、round 和 square。
- @H_502_9@lineJoin 线条拐角属性 @H_502_9@lineJoin 定义两条线相交产生的拐角，可将其称为连接，默认在拐角处创建一个填充的三角形，lineJoin 有三个值：miter、bevel 和 round。
-
@H_502_9@miterLimit 线条斜接长度限制属性
miterLimit 属性需要和 lineJoin 属性配合使用，而且只有当lineJoin=miter时 miterLimit 才生效。
2.1 lineCap 线条帽子属性
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.linewidth = ;
ctx.strokeStyle = "#456795"
ctx.beginPath();
ctx.moveto(,);
ctx.lineto(,);
ctx.lineCap = "butt"; // 设置了lineCap属性值为 butt
ctx.stroke();
ctx.beginPath();
ctx.moveto(,);
ctx.lineto(,);
ctx.lineCap = "round"; // 设置了lineCap属性值为 round
ctx.stroke();
ctx.beginPath();
ctx.moveto(,);
ctx.lineto(,);
ctx.lineCap = "square"; // 设置了lineCap属性值为 square
ctx.stroke();
//下面画两个基准线方便观察
ctx.linewidth = ;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveto(,);
ctx.lineto(,);
ctx.moveto(,);
ctx.lineto(,);
ctx.stroke();
</script>
</body>
@H_502_9@运行结果：
@H_502_9@根据我们两边的参考线，我们可以很清楚地看到
lineCap 的三个值的区别。
@H_502_9@案例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.moveto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.strokeStyle="blue"
ctx.linewidth=
ctx.lineCap="square" // 设置了lineCap属性值为 square
ctx.stroke();
</script>
</body>
</html>
@H_502_9@firefox运行结果：
2.2 lineJoin 线条拐角属性
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.linewidth=;
//绘制第一条折线
ctx.beginPath()
ctx.moveto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineJoin="miter";
ctx.stroke();
//绘制第二条折线
ctx.beginPath()
ctx.moveto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineJoin="bevel";
ctx.stroke();
//绘制第三条折线
ctx.beginPath()
ctx.moveto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineJoin="round";
ctx.stroke();
</script>
</body>
</html>
@H_502_9@运行结果：
@H_502_9@根据上面的运行结果，我们可以很清楚地看到
lineJoin 的三个值的区别。
2.3 miterLimit 线条斜接长度限制属性
@H_502_9@miterLimit = 斜接长度 / 线条宽度(linewidth) = 1 / sin ( min θ / 2 )。
miterLimit 的默认值是10.0，所有的夹角小于 11 度的拐角都会超出这个限制。
如果斜接长度超过 miterLimit 的值，拐角就会以 lineJoin 的 “bevel” 值来显示。
miterLimit 最小值为1，如果设定小于1的值则会被忽略。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.strokeStyle="#456795";
ctx.linewidth=;
ctx.beginPath()
ctx.moveto(,);
ctx.lineto(,);
ctx.lineto(,);
ctx.lineJoin="miter"; // 设置了拐角属性为尖角
ctx.miterLimit=; // 设置了斜接长度最大为1.6
ctx.stroke();
</script>
</body>
</html>
@H_502_9@运行结果：
@H_502_9@miterLimit 的主要目的是防止夹角过小导致绘图的尖角过长的问题。