HTMLキャンバスrect()メソッド
HTMLキャンバスのrect()メソッドは、長方形を作成するために使用されます。
以下は構文です-
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>
出力
-
HTMLDOMキャンバスオブジェクト
HTML DOM Canvasオブジェクトは、HTML5で導入された要素に関連付けられています。 タグは、JavaScriptを使用してグラフィックを描画するために使用されます。キャンバスはグラフィックのコンテナとして機能します。キャンバスには、線や形などを描くことができます。 プロパティ 以下はCanvasObjectのプロパティです- プロパティ 説明 fillStyle 図面の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返すため。 strokeStyle ストロークに使用される色、グラデーション、またはパターンを設定または返すため。
-
HTMLCanvasの基本
Webページにキャンバスを描画するには、HTML5キャンバス要素を使用します。 要素を使用すると、JavaScriptを使用してグラフィックを描画できます。キャンバスを使用して、線、長方形、ベジェ曲線などを描画します。 すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 これに伴い、以下のコードスニペットに示すように、canvasのIDも設定する必要があります- <canvas id = "newCanvas" width = "100" height = "100">