CanvasRenderingContext2D.setLineDash()
Canvas 2D API的CanvasRenderingContext2D接口的setLineDash()方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。
提示：如果要切换回至实线模式，将 dash list 设置为一个空数组即可。
语法
void ctx.setLineDash(segments);
参数
示例
基本示例
这是一段简单的代码片段，使用 setLineDash 方法绘制一条线段。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
// Solid line
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
结果
一些常见的模式
此示例说明了各种常见的线划线模式。
HTML
<canvas id="canvas"></canvas>JavaScript
下面创建的drawDashedLine() 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。
function drawDashedLine(pattern) {
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
y += 20;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let y = 15;
drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]Result
规范描述
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard CanvasRenderingContext2D.setLineDash |
Living Standard |
浏览器兼容性
BCD tables only load in the browser