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

HTMLタグ一覧

HTML: <template> タグ

HTML canvas shadowOffsetX 属性

shadowOffsetXはCanvas 2D APIは影の水平偏移距離を指定する属性です。

HTML canvas 参考マニュアル

オンラインサンプル

右側に影を描画20ピクセル（この青い矩形の左側から）からの矩形：

HTML canvas shadowOffsetX 属性の使用デモ：

サンプル

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　shadowOffsetX　属性の使用(基本チュートリアルウェブ　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.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

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

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

定義と使用法

shadowOffsetX属性は影と形状の間の水平距離を設定または返します。
shadowOffsetX = 0は影が形状の後ろに位置することを意味します。
shadowOffsetX = 20は影が形状の左側位置から右に始まることを意味します20ピクセル。
shadowOffsetX = -20は影が形状の左側位置から左に始まることを意味します20ピクセル。

ヒント：影と形状の垂直距離を調整するには、以下を使用してください shadowOffsetY 属性。

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

属性値

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

HTML canvas 参考マニュアル

HTML: <template> タグ