canvas
動的図形の表示

version 
2.0
3.2
4.0
5.0
分類(HTML5)
フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ
機能分類
外部ファイル
終了タグ

動的に図形を描画する。

  • *
    【属性】
    • -
      width
      幅の指定(ピクセル)
    • -
      height
      高さの指定(ピクセル)
  • *
    【例】

    赤地(100x100)に Hello World を書く例 (IE 未対応)
    <script>
    (function() {
    var canvas=null;
    var context=null;
    window.addEventListener("load",function(){
    canvas=document.getElementById("canvas");
    context=canvas.getContext("2d");
    draw();
    },false);

    function draw(){
    context.clearRect(0,0,100,100);
    context.save();
    context.fillStyle="#ff0000";
    context.fillRect(0,0,100,100);
    context.fillStyle="#ffffff";
    context.fillText("Hello World!!",30,50);
    context.stroke();
    context.restore();
    }
    })();
    </script>
    <canvas id="canvas" width="100" height="100"></canvas>

    あなたのブラウザでの見え方

  • *
    【バージョン】

    HTML5で新設