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

Canvasには context.rect というメソッドが用意されており、これを使えば簡単に四角形が描けてしまいます。
jQueryのプログラムにが7行、表示部分のXHTMLが1行の本当に簡単なプログラムで済んでしまいます。
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
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.stroke();
現在の線スタイルでサブパスを輪郭表示します。長さ0の分は表示前に取り除かれ、空のサブパスは無視されます。
パスに変形が適応されている場合は影響を受けます。
1 |
<canvas id="sample1" width="300" height="150" ></canvas> |
1 2 3 4 5 |
#sample1{ margin:0; padding:0; background-color:#87cefa; } |
関連記事
- [jQuery] 背景の色を変更する方法
- [Vue.js] StyleをVueインスタンスで指定
- [jQuery] 基本的な使い方
- [jQuery] eachでリストの要素数を数える
- [Vue.js] v-on:clickでclassを設定し要素の色を変化させる