Canvas 线段样式 setLineDash() - Canvas 基础教程

Canvas 绘制路径时默认使用的实线(solid)，如果我们想要绘制虚线，那么就要使用 setLineDash() 方法

setLineDash()

ctx.setLineDash() 方法用于设置虚线样式，它的语法格式如下

void ctx.setLineDash(segments);

参数	说明
segments	一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字

如果传递的 segments 数组元素的数量是奇数，数组的元素会被复制并重复

例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]

要怎么理解这个数组呢？

首先大家要理解的是，虚线条是由无数个一段虚线加上一段实线组成的

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

如果是实心线条，就是这样，全部都是黑色的

如果是虚线条，就把其中的一些白色擦掉，当然，这个擦掉不是毫无规律的，而是要遵守下面的规则

起始必须是实心(也就是黑色)
实心和空白交替出现，实心和空白的占比由参数 segment 决定

如果我们设置 segment 为 [1,1] 的话，就是下面这样

如果我们设置 segment 为 [1,2] 的话，就会变成这样

如果我们设置为奇数个数，比如 [1,2,3] ，Canvas 会发现奇数没法交替出现，因为会出现 黑白黑黑白黑.. 中间不是重叠了两个 黑 ,于是它就会把数组复制一遍变成 [1,2,3,1,2,3] 好了，这样就可以交替出现了，于是就会绘制成下面这样

范例

下面的范例使用 setLineDash() 方法将虚线样式设定为 [1,4,8]

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.setLineDash([1,4,8]);
ctx.lineWidth = 15;
ctx.lineTo(300, 50);
ctx.stroke();
</script>

运行结果如下

是不是感觉 get 到了如何绘制条形码