影
キャンバスに描画した図形に影を付けます。影のサイズはshadowBlur属性に、影の色はshadowColor属性に指定します。また、shadowOffsetX属性とshadowOffsetY属性を用いて、水平方向、垂直方向のオフセットとなる距離を指定することで、より立体的な図形を描画することが可能となります。
// 影のサイズの指定 shadowBlur = 5; // 影の色の指定（黒を指定） shadowColor = "rgba(0, 0, 0, 1)"; // 影のオフセットの指定（水平垂直、共に5移動） shadowOffsetX = 5; shadowOffsetY = 5;
サンプル
サンプルは図形に影のサイズ、色、オフセットを指定したものです。上段のものはサイズと色のみ指定したものです。下段はオフセットも指定したものです。オフセットを指定することで立体的に見えるようになっています。また、文字列の挿入で用いるfillTextメソッドも例外ではなく、影が描画されていることが分かります。
// 影のサイズと色の指定
cx.shadowBlur = 10;
// 図形の描画
cx.fillStyle = "rgba(200, 200, 200, 1)";
cx.fillRect(60, 10, 70, 70);
// 影のサイズと色の指定
cx.shadowBlur = 20;
cx.shadowColor = "rgba(255, 0, 0, 1)";
// 図形の描画
cx.fillStyle = "rgba(200, 200, 255, 1)";
cx.fillRect(160, 10, 70, 70);
// 影のサイズと色の指定
cx.shadowBlur = 15;
cx.shadowColor = "rgba(0, 0, 0, 1)";
// 影のオフセットの指定
cx.shadowOffsetX = 8;
cx.shadowOffsetY = 8;
// 図形の描画
cx.fillStyle = "rgba(255, 200, 255, 1)";
cx.fillRect(90, 130, 100, 100);
// 文字列の挿入
cx.fillStyle = "rgba(0, 0, 0, 1)";
cx.fillText("影のサイズと色の指定", 100, 100);
cx.fillText("オフセットの指定", 105, 260);/