HTML canvas shadowOffsetY プロパティ

例

下 20 ピクセル（矩形の上辺の位置から）に配置した影を持つ四角形を描きます：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

プロパティ
shadowOffsetY	Yes	9.0	Yes	Yes	Yes

定義と用法

shadowOffsetY プロパティは、図形からの影の縦方向の距離を設定または返します。

shadowOffsety=0 は、影が図形の真後ろにあることを示します。

shadowOffsetY=20 は、影が（図形の上の位置から）下に 20 ピクセルから始まることを示します。

shadowOffsetY=-20 は、影が（図形の上の位置から）上に 20 ピクセルから始まることを示します。

チップ: 図形から影の横方向の距離を調整するには、shadowOffsetX プロパティを使用します。

デフォルト値：	0
JavaScript 構文：	context.shadowOffsetY=number;

プロパティの値

値	説明	Play it
number	図形からの影の縦方向の距離を定義する正または負の数値	Play it ❯

HTML Canvas リファレンス