canvasタグについて
Posted by specterant on 2012.01.27
canvasタグは、HTML5から新しく追加されたタグで、JavaScriptを組み合わせて図形を描画するモノ。
まぁ〜、JavaScript以外のスクリプトでも描画可能なのですが…。
要は、FlashやJavaのようにプラグインがなくても、円とか四角形などが描けるってことっす。
canvasタグは、Internat Explorer9以上、Firefox1.5以上、Opera9以上、Google Chrome、Safariなどでサポートされています。
でも、Internat Explorer6・7・8でも対応させるには、Googleが提供しているExplorerCanvasというJavaScriptライブラリで解決できます。
そんな訳で、ざっくりとした流れと使用例です。
- canvasを使うために描画コンテキストを取得する。
- getContext()メソッドでcanvasにアクセス。
- 色を指定したり、円を描いたりする設定をする。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>canvas Study</title> <!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]--> <script type="text/javascript"> onload = function() { draw(); } function draw() { var canvas = document.getElementById('basic1'); if (!canvas || !canvas.getContext) { return false; } //canvasを使うための準備(描画コンテキストの取得) //getContext()メソッドでcanvasにアクセス //現在のところ、getContext()メソッドでは'2d'という引数のみがサポート。 var context = canvas.getContext('2d'); context.beginPath(); //図形を描く宣言 context.moveTo(390, 60); //書き始める座標指定 context.lineTo(570, 60); //線を描く設定 context.lineTo(570, 240); //線を描く設定 context.lineTo(390, 240); //線を描く設定 context.closePath(); //描いた図形を閉じる設定 //色指定 context.fillStyle = 'rgb(255,255,255)'; //図形を塗りつぶした状態で描画するメソッド。 //このメソッドを呼び出さないと、ブラウザ上には表示されない。(他に図形を線で描画するメソッドstroke()もある) context.fill(); } </script> </head> <body> <canvas id="basic1" width="960" height="300" style="background-color:#666;">canvasタグをサポートしたブラウザが必要です。</canvas> </body> </html>
No comments yet.