绘制虚线（蚂蚁线）

canvas 绘制路径时认使用的是实线(solid)，本小节我们学习在 canvas 中如何绘制虚线。canvas 中提供了设置虚线样式的 setLineDash()。

首先大家要理解的是，虚线的最小组成单元是一段空白一段实线，整条虚线就是由这样的最小单元重复组成的。

我们列举例子：

假如我们要在下面这网格上绘制线条。

我们先绘制一条实线，它是这样的，整条线段的方格都是填满的。

如果是虚线条，就把线段的一部分擦除掉，当然，在 canvas 中这个擦除不是毫无规律的，而是要遵守下面的规则。

我们如果按实线和空白相等来擦除就是这样的：

在 canvas 中，想要上面的，我们只需要给 setLineDash() 赋值 [1,1] 这样的参数就可以了。

语法：

void ctx.setLineDash(segments);

参数：

segments 是数组，而且必须是偶数长度的数组，canvas 在执行 setLineDash 时，会判断当前数组长度是否为偶数，如果不是，则会复制一份当前数组中的数据，然后追加到数组中。
例如：[1, 2, 3] 会变成 [1, 2, 3, 1, 2, 3]。

上面这个例子就是我们设定了参数 segments 数组为 [1,1] 后绘制的。

如果我们设置参数 segments 数组为 [1,2] 的话，就会变成这样：

如果我们设置参数 segments 数组为奇数个数，比如 [1,2,3] ，canvas 会发现是奇数长度的数组，于是它就会把数组复制一遍变成 [1,2,3,1,2,3]，于是就会绘制成下面这样：

我们上面讲到的为了方便理解，我们用了1，2，3这样的长度来表示，我们现在来看参数是 [10,20,30] 的完整的案例。

<!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');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
       
       
		DottedLine(); 
		Gridding(ctx);

		// 绘制虚线
		function DottedLine(){
			ctx.beginPath();
			ctx.setLineDash([,,]) // 设置虚线
			ctx.Style="#456795"
			ctx.lineWidth=;
			ctx.moveTo(,);
			ctx.lineTo(,);
			ctx.();
		}

		// 绘制网格
		function Gridding(){
		    ctx.lineWidth=;
		    ctx.Style="#ccc";
		    ctx.setLineDash([])  // 这里必须再设置回认状态
		    for(let i=; i<; i+=){
		        ctx.beginPath();
		        ctx.moveTo(i, );
		        ctx.lineTo(i, );
		        ctx.();
		
		        ctx.beginPath();
		        ctx.moveTo(,i);
		        ctx.lineTo(, i);
		        ctx.();
		    }
		}
	</script>
<body>
</html>

在案例中，我们使用了封装绘制网格。

运行结果：

本小节中我们使用到新的 setLineDash()。

setLineDash 作用是设置线条样式。

变量说明：

本小节我们主要学习了利用 setLineDash 设定虚线的样式，本小节主要是理解它的参数的规律，以及参数对线条样式的影响。这里需要说明传入的数组的长度是没有限制的，数组偶数下标代表实线长度，奇数下标代表空白长度。

←绘制三次贝塞尔曲线

阴影效果→

绘制虚线（蚂蚁线）

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