CanvasRenderingContext2D: shadowBlur プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Canvas 2D API の CanvasRenderingContext2D.shadowBlur プロパティは、影にかかるぼかしの量を設定します。デフォルトは 0 (ぼかしなし) です。
メモ: 影はプロパティ shadowColor が透明でない値に設定されているときのみ描画されます。さらに、プロパティ shadowBlur、shadowOffsetX、shadowOffsetY のいずれかがゼロでない値に設定されていなければなりません。
値
影のぼかしの度合いを設定する非負の浮動小数点数です。0 がぼかしなしを表し、数を大きくするとぼかしが強くなります。この値はピクセル数には対応せず、現在の変換行列の影響を受けません。デフォルト値は 0 です。負の値、Infinity、NaN は無視されます。
例
図形に影を加える
この例では、長方形にぼかしがかかった影を加えます、shadowColor プロパティで影の色を設定し、shadowBlur でぼかしの度合いを設定します。
HTML
html
<canvas id="canvas"></canvas> JavaScript
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // 影 ctx.shadowColor = "red"; ctx.shadowBlur = 15; // 長方形 ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 100); 結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-shadowblur-dev |
ブラウザーの互換性
WebKit/Blink 固有の注意点
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); 関連情報
- このプロパティを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.shadowColor