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

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

HTMLキャンバスのrect（）メソッドは、長方形を作成するために使用されます。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。

以下は構文です-

context.fillRect(p,q,width,height);

上記、

  • p： 長方形の左上隅のx座標
  • q： 長方形の左上隅のy座標
  • 幅： 長方形の幅
  • 高さ： 長方形の高さ

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

例

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="350" 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(100, 60, 200, 200);
   ctx.fillStyle = "orange";
   ctx.fill();
   ctx.beginPath();
   ctx.rect(110, 90, 180, 120);
   ctx.fillStyle = "yellow";
   ctx.fill();
</script>
</body>
</html>

出力

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


  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">