HTML5でCanvas描画

こんにちわ。
職人見習いの小森です。

今回は、HTML5のCanvasにおける描画についてです。

○index.html

  Canvas対応ブラウザで表示してください

未対応のブラウザであればメッセージだけが表示されます。

○canvas.js

window.addEventListener("load",function(){
    if(!window.HTMLCanvasElement ){
      return;
    }
    var cv = document.getElementById("c1");
    var context = cv.getContext("2d");

    if(!context){
       return;
    }

    context.fillStyle="white";
    context.fillRect(0,0,c1.width,c1.height);
    context.strokeStyle = "rgba(255,0,0,0.5)";
    context.lineWidth = 10;
    context.strokeRect(10,250,200,10);

    context.beginPath();
    context.strokeStyle="blue";
    context.arc(90,100,50,0,Math.PI,true);
    context.stroke();
},true);

描画先のCanvasを取得し、描画先Canvasから描画機能オブジェクトを取得し
そこに座標、色、サイズなどを指定するという流れです。

※この記事は、なかの人（spitz8008）が書いています。