MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

CanvasRenderingContext2D.getLineDash()

anvasRenderingContext2D.getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。

语法

ctx.getLineDash();

返回值

一个 Array数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。如果数组元素的数量是奇数,数组元素会被复制并重复。 例如, 设置线段为 [5, 15, 25] 将会得到以下返回值 [5, 15, 25, 5, 15, 25]。

示例

使用 getLineDash 方法

这是一段使用 getLineDash 方法的简单的代码片段。

HTML

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

JavaScript

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

ctx.setLineDash([5, 15]);
console.log(ctx.getLineDash()); // [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.getLineDash
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。 使用 getLineDash() 代替。

WebKit-specific 注解

  • 基于 WebKit-based 的浏览器 (例如 Safari),除了此方法外,不标准并且不赞成使用的属性 webkitLineDash 已经被实现。 使用 getLineDash() 代替。

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,