図形に影をつけるには？
解説
図形に影をつけるには、コンテキストオブジェクトのshadowBlur、shadowColor、shadowOffsetX、shadowOffsetYの値を設定します。
それぞれのプロパティの意味は次のようになります。
なお、shadowOffsetX、shadowOffsetYの値に正の値を設定すると、影は右下につきます。
| shadowBlur | 影のぼかし範囲を指定します。数が大きいほど、ぼけた影になります |
| shadowColor | 影の色を指定します |
| shadowOffsetX | 影を元の画像から横方向にどれだけずらすかを指定します |
| shadowOffsetY | 影を元の画像から縦方向にどれだけずらすかを指定します |
以下に影系のプロパティの利用例を示します。
context.shadowBlur = 4;
context.shadowColor = "gray"
context.shadowOffsetX = 4
context.shadowOffsetY = 4;
context.fillStyle = "red";
context.fillRect(20,20,60,40);
関連項目
Canvasとは
線や塗りつぶしの色を指定するには？
