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ライブラリで解決できます。

そんな訳で、ざっくりとした流れと使用例です。

  1. canvasを使うために描画コンテキストを取得する。
  2. getContext()メソッドでcanvasにアクセス。
  3. 色を指定したり、円を描いたりする設定をする。

<!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>

参考サイト
Canvasリファレンス – HTML5タグリファレンス
Canvas – HTML5.JP

No comments yet.

Write a comment:

WP-SpamFree by Pole Position Marketing