HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas rect()メソッド

rect()はCanvas 2D APIが矩形パスを作成する方法、矩形の起点位置は(x, y)、サイズはwidthとheightです。矩形の4ポイントを直線で結んで描画し、子パスを閉じるタグとして使用するため、矩形を塗りつぶしたり縁取りしたりできます。

HTML canvas 参考マニュアル

オンラインサンプル

描画 150*100ピクセルの矩形：

例

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　rect()　方法の使用(基本チュートリアルウェブ　oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safariがrect()をサポートしています。メソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは<canvas>要素をサポートしていません。

定義と使用法

rect()メソッドは矩形を作成します。

ヒント：使用してください： stroke() またはfill() 方法はキャンバス上に実際に矩形を描画します。

JavaScript文法：	context.rect(x,y,width,height);

パラメータ値

パラメータ	説明
x	矩形の左上角のx座標
y	矩形の左上角のy座標
width	矩形の幅（ピクセル単位で）
height	矩形の高さ（ピクセル単位で）

オンラインサンプル

rect()メソッドを使って3つの矩形を作成します：

例

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　rect()　方法の使用(基本チュートリアルウェブ　oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　赤色の矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　緑色の矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　青色の矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

テストを見てみる ‹/›

HTML canvas 参考マニュアル

HTML: <template> タグ