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 July 2015.
Canvas 2D API の CanvasRenderingContext2D.shadowOffsetX
プロパティは、影を横方向にずらす距離を設定します。
メモ: 影はプロパティ shadowColor
が透明でない値に設定されているときのみ描画されます。さらに、プロパティ shadowBlur
、shadowOffsetX
、shadowOffsetY
のいずれかがゼロでない値に設定されていなければいけません。
値
例
影を横方向にずらす
この例では、長方形にぼかしがかかった影を加えます。プロパティ 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 Standard # dom-context-2d-shadowoffsetx-dev |
ブラウザーの互換性
BCD tables only load in the browser