CanvasRenderingContext2D.lineDashOffset

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."

Note: Lines are drawn by calling the stroke() method.

Syntax

ctx.lineDashOffset = value;
value
A float specifying the amount of the line dash offset. The default value is 0.0.

Examples

Offsetting a line dash

This example draws two dashed lines. The first has no dash offset. The second has a dash offset of 4.

HTML

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

JavaScript

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

ctx.setLineDash([4, 16]);

// Dashed line with no offset
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Dashed line with offset of 4
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Result

The line with a dash offset is drawn in red.

Marching ants

The marching ants effect is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let offset = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.lineDashOffset' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support 27
Full support 27
Full support 7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
IE Full support 11Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 27
Full support 27
Full support 7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Uses a non-standard name.
Uses a non-standard name.

Gecko-specific notes

  • Starting with Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), the non-standard and deprecated property mozDashOffset has been implemented. This property will be deprecated and removed in the future, see bug 931389. Use lineDashOffset instead.

WebKit-specific notes

  • In WebKit-based browsers (e.g., Safari), the non-standard and deprecated property webkitLineDashOffset is implemented besides this method. Use lineDashOffset instead.

See also

ドキュメントのタグと貢献者

このページの貢献者: mfluehr, fscholz, nmve, erikadoyle
最終更新者: mfluehr,