CanvasRenderingContext2D.setLineDash()

CanvasRenderingContext2D.setLineDash() 是 Canvas 2D API 设置虚线样式的方法。

语法

void ctx.setLineDash(segments);

参数

segments
一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

示例

使用 setLineDash 方法

这是一段简单的代码片段，使用 setLineDash 方法绘制一条线段。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([5, 15]);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

修改下面的代码并在线查看 canvas 的变化：

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.setLineDash([5, 15]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

Specification Status Comment
WHATWG HTML Living Standard
CanvasRenderingContext2D.setLineDash		 Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 27 (27) 11 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 27.0 (27) (Yes) (Yes) (Yes)

Gecko-specific 注解

  • 从 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)开始，不标准并且不赞成使用的属性 mozDash 已经实现了设置和获取线段列表的功能。将来这个属性不赞成使用并且会被删除，参见  bug 931643.。使用 setLineDash() 进行替代。

WebKit-specific 注解

  • 在 WebKit-based 浏览器中(例如 Safari)， 除了此方法外，一个不标准并且不赞成使用的属性 webkitLineDash 已经被实现。 使用 setLineDash() 进行替代。

参见

文档标签和贡献者

 最后编辑者: ice-i-snow,