| 目次 |
|---|
|
・<canvas>要素を配置 ・コンテキストオブジェクトの取得 ・図形を配置する ・四角形を描く ・円を描く ・曲線を描く |
まず最初に行うことは、<canvas>要素を配置することです。
<canvas>～</canvas>の中には、対応しない環境で表示させるメッセージを記述することができます。
<canvas>要素の大きさは、省略することも出来ますがwidth属性やheight属性、CSSなどで指定することが出来ます。
大きさの指定がない場合は、ブラウザの既定値が使われます。
リスト1. <canvas>要素の配置
<canvas id="sample01" width="500" height="300"> <p>※ここにcanvas要素に対応していない場合、ここの内容が使われます。</p> </canvas>
なお、この先 <canvas>要素の領域がわかりやすいよう背景(銀)色をつけます。
ここからは、スクリプト(JavaScript)でのプログラミングになります。
この後、取得したコンテキストオブジェクトを基に描画して行きます。
リスト2. コンテキストオブジェクトの取得
<script>
var canvas = document.getElementById('sample01');
var context = canvas.getContext('2d');
</script>
まずは、三角形を描きます。
描画の開始位置へ移動し、直線を描き、図形を閉じます。
その後、枠線の描画と領域の塗りつぶしを行います。
リスト3. 図形の配置方法
/* 移動と直線 */ context.beginPath(); //書き始めます。 context.moveTo(20, 20); //x=20px、y=20pxの位置に移動。 context.lineTo(120, 120); //x=120px、y=120pxの位置に線引き。 context.lineTo(20, 120); //x=20px、y=120pxの位置に線引き。 context.closePath(); //線を閉じる。 context.stroke(); //線を描く。 context.fill(); //領域を塗る。
コーディング例
四角形を描きます。
「図形を配置する」でも、四角形はかけますが「矩形メソッド」を使えば簡単に描けます。
※以降、座標で指定する部分がありますが、左上が原点となります。
リスト4. 四角形の描画方法
/* 四角を描く */ context.strokeRect(25, 25, 100, 100); //座標(25,25)から幅100、高さ100の四角形の線引く context.fillRect(175, 25, 100, 100); //座標(175,25)から幅100、高さ100の四角形の塗りつぶす context.clearRect(50, 40, 200, 50); //座標(50,40)から幅200、高さ50の四角形の型抜く
コーディング例
円を描きます。
これは「図形を配置する」のlinetoメソッドと同様の使い方になります。
リスト5. 円の描画方法
/* 円を描く */ context.beginPath(); //書き始めます。 //座標(60, 80)を中心に半径50の円弧を描く context.arc(60, 80, 50, 0, Math.PI*2, false); context.stroke(); //線を描く。 context.beginPath(); //書き始めます。 //座標(190, 80)を中心に半径50の円弧を描く。0～270度の円弧 context.arc(190, 80, 50, 0, 90 * Math.PI / 180, true); context.fill(); //領域を塗る。
コーディング例
曲線を描きます。
これは「図形を配置する」のlinetoメソッドと同様の使い方になります。
リスト6. 曲線の描画方法
/* 2次ベジェ曲線を描く */ context.beginPath(); //書き始めます。 context.moveTo(40,30); //座標(40,30)に移動 context.lineTo(100,30); //座標(100,30)まで線引き // 制御点(120,30)で座標(120,50)までの曲線を描く context.quadraticCurveTo(120,30,120,50); context.lineTo(120,100); //座標(120,100)まで線引き // 制御点(120,120)で座標(100,120)までの曲線を描く context.quadraticCurveTo(120,120,100,120); context.lineTo(40,120); //座標(40,120)まで線引き // 制御点(20,120)で座標(20,100)までの曲線を描く context.quadraticCurveTo(20,120,20,100); context.lineTo(20,50); //座標(20,50)まで線引き // 制御点(20,30)で座標(40,30)までの曲線を描く context.quadraticCurveTo(20,30,40,30); context.closePath(); //線を閉じる。 context.strokeStyle = 'rgb(255,00,00)'; context.stroke(); //線を描く。 /* 3次ベジェ曲線を描く */ context.beginPath(); //書き始めます。 context.moveTo(150,30); //座標(100,30)に移動 context.bezierCurveTo(250, 30, 150, 120, 250, 120); context.strokeStyle = 'rgb(00,00,255)'; context.stroke(); //線を描く。
コーディング例