四角形(矩形)を表示させる[canvas入門][getContext(‘2d’)]

2017年3月18日

Canvasを利用して四角形(矩形)を描きます。本記事ではCanvasを利用するための基本的な下準備を合わせて説明します。

 

 

デモ画面

 

 

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()メソッドで四角形(矩形)を描画しています。

 

 

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー