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

HTML Canvasのfill()メソッドとは？基本構文とサンプルコードを解説

HTML Canvasのfill()メソッドは、現在作成されている描画パス（図形）を塗りつぶすために使用されるメソッドです。塗りつぶし色を指定しない場合、デフォルトの色である黒が適用されます。

<canvas>要素は、JavaScriptを使ってWebページ上にグラフィックを描画するためのHTML5の機能です。各キャンバスには、描画領域のサイズを定義する2つの属性があり、それぞれwidth（幅）とheight（高さ）で指定します。

fill()メソッドの構文

fill()メソッドの基本的な構文は以下の通りです。

ctx.fill();

引数は不要で、呼び出すだけで現在のパスが閉じられ、設定された塗りつぶし色で内部が塗られます。

fill()メソッドの使用例

ここでは、実際にfill()メソッドを使って矩形を描画し、緑色で塗りつぶす例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
お使いのブラウザはHTML5 canvasタグに対応していません。</canvas>
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.rect(50, 60, 300, 200);
   ctx.fillStyle = "green";
   ctx.fill();
</script>
</body>
</html>

コードの解説

  • getContext("2d")：キャンバスの2D描画コンテキストを取得します。
  • beginPath()：新しいパスの作成を開始します。
  • rect(50, 60, 300, 200)：座標(50, 60)を起点として、幅300px・高さ200pxの矩形パスを定義します。
  • fillStyle = "green"：塗りつぶし色を緑に設定します。
  • fill()：定義したパスを、指定した色で塗りつぶします。

実行結果

上記のコードを実行すると、青い枠線のキャンバス内に、緑色で塗りつぶされた矩形が表示されます。

HTML Canvasのfill()メソッドとは？基本構文とサンプルコードを解説

このように、fill()メソッドはfillStyleプロパティと組み合わせることで、任意の色やグラデーションで図形を塗りつぶすことができます。円や多角形など、さまざまなパスにも応用できるので、ぜひ試してみてください。

  1. HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

    HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。 Canvasオブジェクトの主なプロパティ Canvasオブジェクトには、以下のようなプロパティが用意されています。 プロパティ説明 fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。 st

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

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