Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).
The setLineDash()
method of the Canvas 2D API's CanvasRenderingContext2D
interface sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
Note: To return to using solid lines, set the line dash list to an empty array.
Syntax
ctx.setLineDash(segments);
Parameters
segments
- An
Array
of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example,[5, 15, 25]
will become[5, 15, 25, 5, 15, 25]
. If the array is empty, the line dash list is cleared and line strokes return to being solid.
Return value
Examples
Basic example
This example uses the setLineDash()
method to draw a dashed line above a solid line.
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();
Result
Some common patterns
This example illustrates a variety of common line dash patterns.
HTML
<canvas id="canvas"></canvas>
JavaScript
The drawDashedLine()
function created below makes the drawing of multiple dashed lines simple. It receives a pattern array as its only parameter.
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
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.setLineDash' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 27 | IE Full support 11 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android No support No | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
Gecko-specific notes
- Starting with Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), the non-standard and deprecated property
mozDash
has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see bug 931389. UsesetLineDash()
instead.
WebKit-specific notes
- In WebKit-based browsers (e.g., Safari), the non-standard and deprecated property
webkitLineDash
is implemented besides this method. UsesetLineDash()
instead.
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.lineDashOffset