【HTML5】canvasを使用して描く
http://www.parachuteseries.com/study/100322_html5/001.html
四角を描く
function draw() {
/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('canvassample');
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 四角を描く */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}
1,線を描くと宣言。: ctx.beginPath();
2,書き始める場所を指定。: ctx.moveTo(20, 20);
3,引きたい線の終点を指定。: ctx.lineTo(120, 20);
4,引きたい線の終点を指定。: ctx.lineTo(120, 120);
5,引きたい線の終点を指定。: ctx.lineTo(20, 120);
6,描いた線を閉じます。: ctx.closePath();
7,できた図形を線で描画。: ctx.stroke();
一発で矩形を描くメソッド
1, fillRectメソッド
塗りつぶす
2, strokeRectメソッド
枠線のみ
3, clearRectメソッド
切り抜く
サンプルだと一度fillRectを使用し塗
りつぶした四角を描く。
その後、clearRectを使って一部を切り抜く。
円弧
円を描くにはためにはarcメソッドを使用
4, 円を描く
arc(70, 70, 60, 0, Math.PI*2, false)
座標 (70, 70) で半径60ピクセルの円を描き、
0°の位置から時計回りに360°回転して描く。
引数anticlockwiseにtrueとfalseどちらを指定しても同じ図形になる。
5, 円弧を描く
arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true)
座標(70,70)で半径60ピクセルの円を描き、
10°の位置から反時計回りに80°の位置までの円弧を描く。
6, 円弧を塗りつぶす
arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
fill();
fillメソッドを使用して塗りつぶす。
【HTML5使用サイトの紹介】
New Zealand International Arts Festival
