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

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

HTML CanvasのfillStyleプロパティは、図形を描画する際の塗りつぶしに使う「色」「グラデーション」「パターン」を設定するためのプロパティです。初期値は #000000（黒）となっています。

<canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描画できます。canvas要素には描画領域のサイズを決める2つの属性があり、それぞれ高さを表すheightと幅を表すwidthです。

fillStyleの基本構文

ctx.fillStyle = color | gradient | pattern;

fillStyleに設定できる値は、次の3種類です。

  • color： 図形の塗りつぶし色。CSSカラー形式（カラーコード、rgb()、色名など）で指定します。
  • gradient： 線形グラデーション、または円形（放射状）グラデーションのオブジェクト。図形をグラデーションで塗りつぶします。
  • pattern： 図形を埋めるためのパターンオブジェクト。画像などを繰り返し模様として利用できます。

fillStyleの実装例

それでは、実際にCanvasのfillStyleプロパティを使ったサンプルを見ていきましょう。この例では、線形グラデーションを作成して塗りつぶしスタイルに設定し、キャンバス全体を矩形で塗りつぶしています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    var newGrad = ctx.createLinearGradient(0, 0, 130, 0);
    newGrad.addColorStop(0, "blue");
    newGrad.addColorStop(0.8, "green");
    ctx.fillStyle = newGrad;
    ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html>

実行結果

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

上記のコードを実行すると、左側が青（blue）、右側が緑（green）へと滑らかに変化する線形グラデーションで塗りつぶされたキャンバスが表示されます。

処理の流れのポイント

  • createLinearGradient()でグラデーションオブジェクトを生成する
  • addColorStop()でオフセット位置（0〜1）と色を追加する
  • 生成したグラデーションをfillStyleに代入する
  • fillRect()で実際に矩形を描画する

このように、fillStyleプロパティを活用することで、単色だけでなく美しいグラデーションやパターンによる表現も簡単に実現できます。

  1. HTML DOM langプロパティとは？言語コードの取得・設定方法をわかりやすく解説

    HTML DOMのlangプロパティは、要素のコンテンツがどの言語で書かれているかを示す言語コード（例：英語なら「en」）を表す文字列を、取得または設定するためのプロパティです。このプロパティを利用することで、JavaScriptから動的に要素の言語情報を読み取ったり、変更したりすることができます。 構文 langプロパティの基本的な構文は以下のとおりです。 言語コードを取得する場合 HTMLElementObject.lang lang属性に言語コードを設定する場合 HTMLElementObject.lang = lang_code 補足：主な言語コードの例 lang属性には、IS

  2. HTML DOMのli valueプロパティとは？使い方とサンプルコードを解説

    HTML DOM の value プロパティは、<li> 要素の value 属性の値を取得または設定するために使用されます。順序付きリスト（<ol>）では通常、項目番号は自動的に振られますが、このプロパティを使うことで、JavaScript から各リスト項目の番号を動的に制御できるようになります。 構文 value プロパティの基本的な構文は以下のとおりです。 値の取得 liObject.value 値の設定 liObject.value = 文字列 サンプルコード ここでは、レースの順位リストを例に、value プロパティの実際の動作を確認してみましょう。「アレック