CanvasRenderingContext2D:getLineDash() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

CanvasRenderingContext2D 接口的 getLineDash() 方法用于获取当前的虚线样式。

语法

js
getLineDash()

参数

无。

返回值

一个数字 Array,用于指定交替绘制线条和间隙(以坐标空间单位)的距离。如果设置元素时的数字是奇数,则数组中的元素会被复制并连接。例如,将虚线设置为 [5, 15, 25] 会得到 [5, 15, 25, 5, 15, 25]

示例

获取当前虚线设置

此示例演示了 getLineDash() 方法。

HTML

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

JavaScript

setLineDash() 设置,描边由 10 个单位宽的线条组成,每条线之间有 20 个单位的间隙。

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

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash()); // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

结果

规范

规范
HTML
# dom-context-2d-getlinedash-dev

浏览器兼容性

另见