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.