Canvas（図形描画）

描画コンテキストの取得

    <canvas id="id名" width="幅" height="高さ"></canvas>

    IE6, IE7, IE8 を Canvas に対応させるため、excanvas.js を取得し読み込む。

    <!--[if lt IE 9]>
        <script src="excanvas.js"></script>
    <![endif]-->

    <script>
    //<![CDATA[
    function Draw() {
        var canvas = document.getElementById( 'id名' );   // canvas オブジェクト
        /* オブジェクトが存在しない、ブラウザが Canvas 未対応の場合 */
        if ( ! canvas || ! canvas.getContext ) {
            return false;   // 処理を終了
        }
        var ctx = canvas.getContext( '2d' );   // 描画コンテキスト
            
        // 図形を描画するコード
            .
            .
    }
    Draw();
    //]]>
    </script>

図形を描画

    ctx.beginPath();   // 線を描く宣言
    ctx.fillStyle = '#9999ff';   // 塗りつぶす色やスタイル
    ctx.rect( 10, 10, 80, 80 );   // 四角（始点x, y座標, 幅, 高さ）
    ctx.fill();   // 塗りつぶす

    ctx.beginPath();   // 線を描く宣言
    ctx.strokeStyle = '#333333';   // 線の色やスタイル
    ctx.rect( 10, 10, 80, 80 );   // 四角（始点x, y座標, 幅, 高さ）
    ctx.stroke();   // 線を描画

    ctx.beginPath();   // 線を描く宣言
    ctx.fillStyle = '#ff9999';   // 塗りつぶす色やスタイル
    // 円（中心x, y座標, 半径, 始点, 終点, 時計回り）
    ctx.arc( 50, 50, 45, 0, Math.PI * 2.0, true );
    ctx.fill();   // 塗りつぶす

    ctx.beginPath();   // 線を描く宣言
    ctx.strokeStyle = '#333333';   //  線の色やスタイル
    // 円（中心x, y座標, 半径, 始点, 終点, 時計回り）
    ctx.arc( 50, 50, 45, 0, Math.PI * 2.0, true );
    ctx.stroke();   // 線を描画

    ctx.fillStyle = '#333333';   // 塗りつぶす色やスタイル
    // フォント（スタイル サイズ 種類）
    ctx.font = "bold 50pt arial, verdana, sans-serif";
    // 文字（文字, 始点x, y座標）
    ctx.fillText( 'A', 35, 65 );   // 塗りつぶしのテキスト