CanvasRenderingContext2D: shadowColor プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API の CanvasRenderingContext2D.shadowColor プロパティは、影の色を設定します。

描画時の影の不透明度は、塗りつぶしでは fillStyle の色の、線の描画では strokeStyle の色の影響を受けることを覚えておいてください。

メモ: 影はプロパティ shadowColor が透明でない色に設定されているときのみ描画されます。さらに、プロパティ shadowBlur、shadowOffsetX、shadowOffsetY のいずれかがゼロでない値に設定されていなければなりません。

値

CSS の <color> の値として解析される文字列です。デフォルト値は完全に透明な黒です。

例

図形に影を加える

この例では、2 個の正方形に影を加えます。正方形のうち 1 個は塗りつぶされ、もう 1 個は線で描かれます。shadowColor プロパティで影の色を設定し、shadowOffsetX と shadowOffsetY で影の図形からの相対位置を設定します。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// 塗りつぶす長方形
ctx.fillRect(20, 20, 100, 100);

// 線で描く長方形
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

結果

半透明な図形の影

影の不透明度は (shadowColor では完全に不透明な値を設定していても) 親オブジェクトの透明度の影響を受けます。この例では、半透明の色の長方形を線で描き、塗りつぶしを行います。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

塗りつぶす影のアルファ値は .8 * .2 すなわち .16 になります。線で描く影のアルファ値は .8 * .6 すなわち .48 になります。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 影
ctx.shadowColor = "rgba(255, 0, 0, .8)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// 塗りつぶす長方形
ctx.fillStyle = "rgba(0, 255, 0, .2)";
ctx.fillRect(10, 10, 150, 100);

// 線で描く長方形
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(0, 0, 255, .6)";
ctx.strokeRect(10, 10, 150, 100);

結果

仕様書

Specification
HTML Standard
# dom-context-2d-shadowcolor-dev

ブラウザーの互換性

BCD tables only load in the browser

WebKit ベースおよび Blink ベースのブラウザーでは、このプロパティに加え、非標準で非推奨のメソッド ctx.setShadow() が実装されています。

js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);

関連情報