HTML5のCanvas 2Dを利用して線矩形と塗りつぶし矩形を描く
HTML（ハイパー・テキスト・マークアップ言語）の最新の仕様である HTML5 にはCanvasという要素がある。この要素を利用すると、画像ファイルやFlash playerやJavaアプレットなどに頼らず、HTMLとCSSとJavaScriptだけで図形やアニメーションをウェブ・ページ上に描画することができるらしい。 必要なものはHTML5とCSSとJavaScriptに対応しているウェブ・ブラウザである。世界的に普及している主要なウェブ・ブラウザ（Google Chrome, Firefox, Opera, Safariなど）の最新版をインストールしていれば、基本的なことはできるようだ。 下準備 最初に、Canvas要素を埋め込んだHTML文書（.htmlという拡張子を持つテキストファイル）を作成した。HTMLはHTML5の仕様に則って記述したつもり。そのファイルの内容は次のとおり。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> </head> <body> <canvas id="canvas_rectangle" width="250" height="250"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_rectangle.js"></script> </body> </html> canvas要素のid属性で指定した名前はJavaScriptのソースコードから参照するために使われるもの。canvas要素のwidthとheightでCanvasの描画範囲の大きさを指定した。widthが幅でheightが高さ。script要素を記述し、そのsrc属性にJavaScriptのソースファイル名を指定した。このファイルにJavaScriptでコードを記述し...