投稿

3月, 2017の投稿を表示しています

ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ありません。

このブログではサイドバーに広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLatexのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

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でコードを記述し