English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Canvas shadowsに5画布上に描画された形状に自動的に影を追加します。shadowOffsetX と shadowOffsetY は影を描画する距離を設定します。
HTMLに5画布上に描画された形状に自動的に影を追加します。以下にいくつかの例があります:
影は以下の四つの2D Context属性が制御する:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
shadowOffsetX と shadowOffsetY は影を描画する距離を設定します。正の値は影が形状の（x）右側と（y）下側に描画されることを意味し、負の値は影が形状の（x）左側と（y）上側に描画されることを意味します。
shadowBlur は影がぼやけた程度を設定します。この数値が大きいほど、形がぼやけます。数値が小さいほど、影が鋭くなります。0は影が全くぼやけないことを意味します。
shadowColor は影の色を設定するだけです。
これは上記のサンプルのコードです:
<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666";//またはrgb（赤，緑，青）を使用
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas シャドウ", 10,120);
</script>テストを見てみる ‹/›