share facebook facebook twitter menu hatena pocket slack

2011.11.17 THU

HTML5でCanvas描画

小森隆太

WRITTEN BY 小森隆太

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

今回は、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)が書いています。

小森隆太

小森隆太