HTML5 canvas rect メソッド
 HTML5 canvas リファレンス
例
150 * 100ピクセルの矩形を描画します:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Try it yourself »
定義と用法
rect メソッドは、矩形を作成します。
キャンバスに矩形を描画するためには、stroke() または fill() メソッドを使用します。
rect メソッドは、4つのパラメータ (x,y,w,h) を取ります。
最初の2つのパラメータは、キャンバスに矩形を配置する場所の x 座標と y 座標を表しています。
最後の2つのパラメータは、長方形の大きさ（幅と高さ）を表します。
| JavaScript 構文: |
context.rect(x,y,width,height); |
ブラウザ・サポート
rect メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
Play it |
| x |
x-coordinate |
矩形の左上隅を配置するキャンバスの x 座標 |
Play it » |
| y |
y-coordinate |
矩形の左上隅を配置するキャンバスの y 座標 |
Play it » |
| width |
width |
矩形の幅（ピクセル単位） |
Play it » |
| height |
height |
矩形の高さ（ピクセル単位） |
Play it » |
HTML5 canvas リファレンス
|