setLineDash(segments)

在填充线时使用虚线模式. 它使用一组值来指定描述模式的线和间隙的交替长度.

  ctx.setLineDash([5,15])

参数

Number 一个Array数组一组描述交替绘制线段和间距(坐标空间单位)长度的数字.


测验

传数组[5,10],从(5,50)到(290,50)画一条线,结果是一条虚线

研究表明,虚线的实线部分长度为5,间隔部分长度为10.也就是说数组1位为实线长度,2位为间隔长度

为证实推测,将数组修改为[5,30]再画一条虚线.结果间隔确实变成30了.

画虚线前要使用save()保存状态,画完后再restore(),为了避免干扰画其它的路径.

下面画一个虚线的圆,依然使用[5,10]

如果传入空数组[],结果就是实线.如果传入1个值的数组[5],会如何.结果是实线与间隔都一样长.

数组不仅只有1或2个值,[5,10,20],这样的参数会怎么样.看下图会发现第1个实线段是5,第1个间隔是10,第2个实线段是20

接着第2个间隔是5,第3个实线段是10,第3个间隔是20.这表明虚线的周期交替是按数组的3个元素为一个周期,且是以实线段开始.

[5,8,13,21],画这样一条虚线.那么虚线的交替情况应该是:实(3),间(5)实(8),间(13)实(21)

做为一个周期.结果正是如此,看下图

规律

以上研究说明,虚线的一个(实线与间隔)交替周期由数组位数决定.而且有个现象是,数组长度为偶数时,每个周期的图像是一样的.

而数组长度为奇数时(长度为1除外),每过一个周期,实线部分会变成间隔,间隔会变成实线

数组长度为1时,是一条线段与间隔相同的均匀虚线.