Canvas 线段样式 setLineDash()

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

setLineDash()

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

void ctx.setLineDash(segments);
参数 说明
segments 一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字

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

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

要怎么理解这个数组呢?

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

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

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

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

  1. 起始必须是实心(也就是黑色)
  2. 实心和空白交替出现,实心和空白的占比由参数 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 到了如何绘制条形码

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.