JavaScript: canvasに描画した図形に影をつける

HTML5 Canvas API を使って、図形に影をつけてみます。

影をつける場合はメソッドではなく、プロパティを設定します。 使用するプロパティは次の通りです。
プロパティ機能
shadowColor影の色
shadowOffsetXx 方向へのオフセット距離
shadowOffsetYy 方向へのオフセット距離
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 プロパティに値を指定します。

このようにして図形に影をつけることができます。

JavaScript入門