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