水车_ ·绘制虚线（蚂蚁线）
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>
在案例中，我们使用了封装函数绘制网格。
运行结果：
4. 方法整理
本小节中我们使用到一个新的方法 setLineDash()。
4.1 setLineDash()方法
setLineDash 方法作用是设置线条样式。
变量说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| segments | Array | 是 | 一个数组，一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 |
5. 总结
本小节我们主要学习了利用 setLineDash 方法设定虚线的样式，本小节主要是理解它的参数的规律，以及参数对线条样式的影响。这里需要说明传入的数组的长度是没有限制的，数组偶数下标代表实线长度，奇数下标代表空白长度。
2024 imooc.com All Rights Reserved |