HTMLリファレンスマニュアル

HTMLタグ一覧

HTML: <template> タグ

HTML canvas shadowOffsetY属性

shadowOffsetYはCanvas 2D APIは影の垂直偏移距離を指定する属性です。

HTML canvas 参考マニュアル

オンラインサンプル

矩形の上部に影を描画20ピクセルの矩形：

shadowOffsetY　属性の使用：

サンプル

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　shadowOffsetY　属性の使用(基本教程網　oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTML5　canvas　タグ。
</canvas>
<script>
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);
</script>
</body>
</html>

テストして見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome そして Safari はshadowOffsetY属性をサポートしています。

注意：Internet Explorer 8 及びそれ以前のバージョンでは<canvas>要素をサポートしていません。

定義と使用方法

shadowOffsetY属性は影と形状の垂直距離を設定または返します。
shadowOffsety = 0は影が形状の後ろに位置することを意味します。
shadowOffsetY = 20は影が形状の上部位置の下から始まることを意味します20ピクセル。
shadowOffsetY =-20は影が形状の上部位置の上から始まることを意味します20ピクセル。

ヒント：影と形状の水平距離を調整するには、 shadowOffsetX 属性。

デフォルト値：	0
JavaScript 语法：	context.shadowOffsetY=number;

属性値

値	説明
number	正の値または負の値、影と形状の垂直距離を定義します。

HTML canvas 参考マニュアル

HTML: <template> タグ