绘制虚线(蚂蚁线)
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
设定虚线的样式,本小节主要是理解它的参数的规律,以及参数对线条样式的影响。这里需要说明传入的数组的长度是没有限制的,数组偶数下标代表实线长度,奇数下标代表空白长度。