绘制虚线（蚂蚁线）

1. 前言

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

2. 什么是虚线？

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

我们列举一个例子：

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

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

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

起始必须是实线。
实线和空白交替出现。

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

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

3. setLineDash() 方法

语法：

void ctx.setLineDash(segments);

参数：

参数	说明
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]，于是就会绘制成下面这样：

3.1 整体案例

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

实例演示

预览复制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=100
		const ctx = canvas.getContext('2d');
       
       
		strokeDottedLine(); 
		strokeGridding(ctx);

		// 绘制虚线
		function strokeDottedLine(){
			ctx.beginPath();
			ctx.setLineDash([10,20,30]) // 设置虚线
			ctx.strokeStyle="#456795"
			ctx.lineWidth=10;
			ctx.moveTo(0,45);
			ctx.lineTo(300,45);
			ctx.stroke();
		}

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=100
		const ctx = canvas.getContext('2d');
       
       
		strokeDottedLine(); 
		strokeGridding(ctx);

		// 绘制虚线
		function strokeDottedLine(){
			ctx.beginPath();
			ctx.setLineDash([10,20,30]) // 设置虚线
			ctx.strokeStyle="#456795"
			ctx.lineWidth=10;
			ctx.moveTo(0,45);
			ctx.lineTo(300,45);
			ctx.stroke();
		}

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

运行案例点击 "运行案例" 可查看在线运行效果

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

运行结果：

4. 方法整理

本小节中我们使用到一个新的方法 setLineDash()。

4.1 setLineDash()方法

setLineDash 方法作用是设置线条样式。

变量说明：

变量名	类型	是否必须	说明
segments	Array	是	一个数组，一组描述交替绘制线段和间距（坐标空间单位）长度的数字。

5. 总结

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