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

HTMLキャンバスfill（）メソッド

HTMLキャンバスのfill（）メソッドは、現在の描画パスを塗りつぶすために使用されます。デフォルトは黒です。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。

以下は構文です-

ctx.fill();

ここで、canvasのfill（）メソッドを実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
Your browser does not support the HTML5 canvas tag.</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>

出力

HTMLキャンバスfill（）メソッド


  1. HTMLDOMキャンバスオブジェクト

    HTML DOM Canvasオブジェクトは、HTML5で導入された要素に関連付けられています。 タグは、JavaScriptを使用してグラフィックを描画するために使用されます。キャンバスはグラフィックのコンテナとして機能します。キャンバスには、線や形などを描くことができます。 プロパティ 以下はCanvasObjectのプロパティです- プロパティ 説明 fillStyle 図面の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返すため。 strokeStyle ストロークに使用される色、グラデーション、またはパターンを設定または返すため。

  2. HTMLCanvasの基本

    Webページにキャンバスを描画するには、HTML5キャンバス要素を使用します。 要素を使用すると、JavaScriptを使用してグラフィックを描画できます。キャンバスを使用して、線、長方形、ベジェ曲線などを描画します。 すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 これに伴い、以下のコードスニペットに示すように、canvasのIDも設定する必要があります- <canvas id = "newCanvas" width = "100" height = "100">