JavaScript: canvasに描画した図形に影をつける
HTML5 Canvas API を使って、図形に影をつけてみます。
影をつける場合はメソッドではなく、プロパティを設定します。 使用するプロパティは次の通りです。プロパティ | 機能 |
---|---|
shadowColor | 影の色 |
shadowOffsetX | x 方向へのオフセット距離 |
shadowOffsetY | y 方向へのオフセット距離 |
shadowBlur | 影のぼかし (値が大きいほどぼかしが大きくなる) |
サンプルコード: 矩形に影をつける
HTML・CSS
<canvas id="canvas"></canvas>
<style>
canvas {
border: 1px solid silver;
}
</style>
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.fillStyle = 'red';
c.shadowColor = 'gray'; // 影の色
c.shadowOffsetX = 5; // x 方向
c.shadowOffsetY = 5; // y 方向
c.fillRect(50, 50, 50, 50);
c.shadowBlur = 2; // ぼかし
c.fillRect(140, 50, 50, 50);
2つの矩形に対して、影をつけています。左側が「ぼかし無し」、右側が「ぼかし有り」です。
影をつけるには、shadowColor プロパティで色を指定します。 次に影をずらす方向と距離を shadowOffsetX プロパティ、shadowOffsetY プロパティで指定します。
影をぼかす場合は shadowBlur プロパティに値を指定します。
このようにして図形に影をつけることができます。