[Canvas] 四角形を描く context.rect(x,y,w,h)

Canvasには context.rect というメソッドが用意されており、これを使えば簡単に四角形が描けてしまいます。

jQueryのプログラムにが7行、表示部分のXHTMLが1行の本当に簡単なプログラムで済んでしまいます。

JavaScript

<script type="text/javascript">
window.onload = function () {
    var canvas = document.querySelector('#sample1');//キャンバスを選択

    var context = canvas.getContext('2d');
    context.beginPath();//新しいパスを作成
    context.rect(50, 50, 50, 50);//図形の上下、横縦幅を指定
    context.stroke();//パスを輪郭表示する

}
</script>

window.onload = function () {

var canvas = document.querySelector('#sample1');//キャンバスを選択

var context = canvas.getContext('2d');

context.beginPath();//新しいパスを作成

context.rect(50, 50, 50, 50);//図形の上下、横縦幅を指定

context.stroke();//パスを輪郭表示する

}

</script>

var canvas = document.querySelector(‘#sample1’);
描画する場所を選択します。canvas 要素の id を sample1 としたので、#sample1 と指定します。

var context = canvas.getContext(‘2d’);
コンテキスト名を指定します。getContext()には現在「2d」という引数しかサポートがありません。将来的には「3d」が使えるようになるかもしれません。

context.beginPath();
現状のパスをリセットして、サブパスを無くします。canvasを使う時のおまじない（初期化）です。

項目	意味
context.beginPath()	現状のパスをリセットし、サブパスを消す
context.closePath()	現状のサブパスを閉じて、新規にサブパスを作る。サブパスの始点は現状のサブパスの始点の座標。

context.rect(50, 50, 50, 50);
図形の位置・大きさを設定する部分で、書式は以下のようになります。

書式

context.rect(左上のX座標, 左上のY座標, 幅, 高さ);

context.stroke();
現在の線スタイルでサブパスを輪郭表示します。長さ０の分は表示前に取り除かれ、空のサブパスは無視されます。
パスに変形が適応されている場合は影響を受けます。

XHTML

<canvas id="sample1" width="300" height="150" ></canvas>

1	<canvas id="sample1" width="300" height="150" ></canvas>

CSS

 #sample1{
margin:0;
padding:0;
background-color:#87cefa;
}

#sample1{

margin:0;

padding:0;

background-color:#87cefa;

}

結果表示

参考

SearchLight