CanvasRenderingContext2D: setLineDash() 方法
Canvas 2D API 的 CanvasRenderingContext2D 接口中的 setLineDash() 方法用于设置绘制线条时使用的虚线模式。它使用一个数值数组来指定交替的线条和间隙的长度，以描述虚线模式。
注意： 要恢复为实线，请将虚线列表设置为空数组。
语法
js
setLineDash(segments)
参数
返回值
无（undefined）。
示例
基本示例
此示例使用 setLineDash() 方法在实线上方绘制一条虚线。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
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
html
<canvas id="canvas"></canvas>
JavaScript
下面创建的 drawDashedLine() 函数使绘制多条虚线变得简单。它仅以一个模式数组作为其唯一参数。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let y = 15;
function drawDashedLine(pattern) {
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
y += 20;
}
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]
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-setlinedash-dev |
浏览器兼容性
加载中…