Canvasを利用して四角形（矩形）を描きます。本記事ではCanvasを利用するための基本的な下準備を合わせて説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas入門</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #canvas { background-color: #ddd; } </style> <head> <body> <canvas id="canvas" width="500" height="500"> ブラウザが対応しておりません。 </canvas> <script> window.addEventListener('load', draw, false); function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#008000'; //塗りつぶしの色を指定 ctx.fillRect(10,20,100,100); //左から10上から20の位置に四角形（矩形）を描画 } </script> </body> </html> |
15〜17行目
まずはcanvasタグを記述し、idを割り振ります。同じページに別のCanvasを作成する場合には別のidを割り振ります。
またcanvas要素のwidthとheight属性を設定することにより、描画領域のためのcanvasサイズを決定しています。このサイズはタグ内に直接記述するようにします。
16行目
Canvasに対応していないブラウザの場合に表示されます。
21行目
イベントリスナーでページ全体が読み込まれた際にdraw関数が呼ばれるようにしています。</body>タグの直前にJavaScriptを記述しているので、必然的にページが読み込まれた後にdraw関数が呼ばれるようになっていますが、今後はイベントリスナーで記述していきます。
関連ページ
24行目
Canvasタグのidを基にCanvasオブジェクトを生成しています。
25行目
描画をするためのコンテキストオブジェクトを取得しています。「2d」は2Dコンテキスト（CanvasRenderingContext2D）を利用するための引数です。書籍等でよく見られる変数ctxは、contextの略です。
27、28行目
fillStyle()メソッドで描画領域を塗りつぶす色を指定し、fillRect()メソッドで四角形（矩形）を描画しています。
