2012年05月06日

HTML5のcanvasで円グラフを描画

HTML5のcanvasで円グラフを描画を描画する方法

window.onload = function(){
var imgcanvas = document.getElementById("imgcanvas");
if (imgcanvas.getContext){
var ctx = imgcanvas.getContext("2d");
var xPos = imgcanvas.offsetWidth / 2;
var yPos = imgcanvas.offsetHeight / 2;
var radius = 80;
var sAngle = 0;
var eAngle = 0;
sAngle = ( 0 - 90) * Math.PI / 180;
eAngle = (120 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(xPos , yPos);
ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
ctx.closePath();
ctx.fillStyle = "rgba(255,0,0,.5)";
ctx.fill();
}
};
タグ:HTML5 Canvas
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック