HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML CanvasのshadowColorプロパティとは？使い方をサンプルコード付きで解説

HTMLキャンバス（Canvas）のshadowColorプロパティは、図形に描画される影の色を設定するためのプロパティです。デフォルト値は #000000（黒）となっています。

shadowColorプロパティを使用する際は、shadowBlurなどの他のシャドウ関連プロパティと組み合わせることで、より自然で美しい影の表現が可能になります。

shadowColorプロパティの構文

shadowColorプロパティの基本的な書式は以下の通りです。

ctx.shadowColor = color;

color の部分には、CSSと同じ形式で色を指定します。具体的には、色名（例："gray"）、16進数カラーコード（例："#808080"）、RGB値（例："rgb(128,128,128)"）などが使用できます。

shadowColorプロパティの使用例

それでは、実際にcanvasのshadowColorプロパティを使って、図形に影を付けるサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "gray";
    ctx.fillStyle = "blue";
    ctx.fillRect(40, 40, 200, 250);
</script>
</body>
</html>

コードの解説

  • shadowBlur = 20： 影のぼかし具合を20ピクセルに設定しています。
  • shadowColor = "gray"： 影の色をグレーに指定しています。
  • fillRect(40, 40, 200, 250)： 座標(40, 40)を起点として、幅200px・高さ250pxの青い矩形を描画します。

実行結果

上記のコードを実行すると、オレンジ色の枠線を持つキャンバス上に青い四角形が描画され、その周囲にはグレーの柔らかい影が表示されます。

HTML CanvasのshadowColorプロパティとは？使い方をサンプルコード付きで解説

関連するシャドウプロパティ

canvasの影の描画では、shadowColor以外にも以下のプロパティが利用できます。

  • shadowBlur： 影のぼかしの度合いを数値で指定します。
  • shadowOffsetX： 影の横方向のオフセット（ずれ）を指定します。
  • shadowOffsetY： 影の縦方向のオフセット（ずれ）を指定します。

これらのプロパティを組み合わせることで、立体的なボタンやカードUIなど、さまざまな視覚効果を実現できます。

  1. HTML DOMのscrollLeftプロパティとは？水平スクロール位置の取得・設定方法を解説

    HTMLドキュメントにおけるDOMのscrollLeftプロパティは、要素内のコンテンツが水平方向にどれだけスクロールされているかを、ピクセル単位で取得・設定できるプロパティです。JavaScriptから動的に横スクロールの位置を制御したい場合に活用できます。 構文 scrollLeftプロパティの基本的な構文は以下のとおりです。 現在のスクロール位置を取得する element.scrollLeft スクロール位置を設定する element.scrollLeft = value valueには、移動先の位置をピクセル単位の数値で指定します。 サンプルコード それでは、scrollLeftプロパ

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne