线条属性

线条的有五个，我们前面小节已经学习了两个，分别是表示路径颜色的 Style 和表示路径宽度的 lineWidth，今天我们继续学习剩下的三个，lineCap 、lineJoin 和 miterLimit 。

canvas 中和线条有关的有五个：

lineWidth 线条宽度
lineWidth 定义线的宽度（认值为1.0）。

Style 线条描边
Style 定义线和形状边框的颜色和样式。

lineCap 线条帽子

lineCap 定义上下文中线的端点，可以有以下3个值，butt、round 和 square。

lineJoin 线条拐角

lineJoin 定义两条线相交产生的拐角，可将其称为连接，认在拐角处创建填充的三角形，lineJoin 有三个值：miter、bevel 和 round。

miterLimit 线条斜接长度限制
miterLimit 需要和 lineJoin 配合使用，而且只有当 lineJoin=miter 时 miterLimit 才生效。

lineWidth 和 Style 我们就不展开说明，本小节我们主要讲解后三个。

我们先看案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style = "#456795"
		
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineCap = "butt";  // 设置了lineCap值为 butt
		ctx.();
		
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineCap = "round";  // 设置了lineCap值为 round
		ctx.();
		
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineCap = "square";  // 设置了lineCap值为 square
		ctx.();
		
		//下面画两个基准线方便观察
		ctx.lineWidth = ;
		ctx.Style = "red";
		
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.();
		
	</script>
</body>

运行结果：

根据我们两边的参考线，我们可以很清楚地看到 lineCap 的三个值的区别。

在使用 lineCap 的时候，我们需要知道一点，lineCap 只作用于同一条路径的两端，比如折线，也只有在折线的两端才会生效。

回顾

还记得我们在学习【用线条绘制图形】那一小节中，列举了在firefox浏览器下终点和起点没有闭合的案例吗？本小节我们再用那个案例来说明一下 lineCap 的应用。

案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style="blue"
		ctx.lineWidth=
		
		ctx.lineCap="square"  // 设置了lineCap值为 square
		
		ctx.();
	</script>
</body>
</html>

firefox运行结果：

我们可以看到的缺口已经不存在了。

我们先看案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style="#456795";
		ctx.lineWidth=;
		
		//绘制第一条折线
		ctx.beginPath()       
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineJoin="miter";
		ctx.();
		
		//绘制第二条折线
		ctx.beginPath()       
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineJoin="bevel";
		ctx.();
		
		//绘制第三条折线
		ctx.beginPath()     
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.lineJoin="round";
		ctx.();
		
	</script>
</body>
</html>

运行结果：

根据上面的运行结果，我们可以很清楚地看到 lineJoin 的三个值的区别。

想要知道斜接长度限制就得先弄懂什么是斜接长度？斜接长度指的是在两条线交汇处内角和外角之距离。我们来看一张图，下图中的三个案例中两条竖线中距离表示的就是斜接长度。

我们明白了什么是斜接长度，接下来就开始了解什么是斜接长度限制 miterLimit 了。我们借用的一张图来看一下：

miterLimit = 斜接长度 / 线条宽度(lineWidth) = 1 / sin ( min θ / 2 )。
miterLimit 的认值是10.0，所有的夹角小于 11 度的拐角都会超出这个限制。
如果斜接长度超过 miterLimit 的值，拐角就会以 lineJoin 的 “bevel” 值来。
miterLimit 最小值为1，如果设定小于1的值则会被忽略。

我们看案例：

<!DOCTYPE html>
<html>
<head>
	< 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.Style="#456795";
		ctx.lineWidth=;
		
		ctx.beginPath()       
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		
		ctx.lineJoin="miter";  // 设置了拐角为尖角
		ctx.miterLimit=;    // 设置了斜接长度最大为1.6
		
		ctx.();
		
	</script>
</body>
</html>

运行结果：

miterLimit 的主要目的是防止夹角过小导致绘图的尖角过长的问题。

本小节我们主要总结了和线条相关的。

←描边填充渐变颜色

绘制圆→

线条属性

您的鼓励是对我最大的支持