CanvasRenderingContext2D: shadowOffsetX プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Canvas 2D API の CanvasRenderingContext2D.shadowOffsetX プロパティは、影を横方向にずらす距離を設定します。
メモ: 影はプロパティ shadowColor が透明でない値に設定されているときのみ描画されます。さらに、プロパティ shadowBlur、shadowOffsetX、shadowOffsetY のいずれかがゼロでない値に設定されていなければいけません。
値
影を横方向にずらす距離を表す浮動小数点数です。正の値を設定すると右に、負の値を設定すると左にずらします。デフォルト値は 0 (横方向にずらさない) です。Infinity や NaN は無視されます。
例
影を横方向にずらす
この例では、長方形にぼかしがかかった影を加えます。プロパティ shadowColor で影の色を設定し、shadowOffsetX で影のオフセットを右に 25 単位に設定し、shadowBlur で影のぼかしレベルを 10 に設定します。
HTML
html
<canvas id="canvas"></canvas> JavaScript
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // 影 ctx.shadowColor = "red"; ctx.shadowOffsetX = 25; ctx.shadowBlur = 10; // 長方形 ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 100); 結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-shadowoffsetx-dev |