章节索引 :

绘制虚线(蚂蚁线)

1. 前言

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

2. 什么是虚线?

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

我们列举一个例子:

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

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

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

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

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

在 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>
运行案例 点击 "运行案例" 可查看在线运行效果

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

运行结果:

4. 方法整理

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

4.1 setLineDash()方法

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

变量说明:

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

5. 总结

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