用html语言写一个环形,javascript+html5实现绘制圆环的方法

Your browser does not support the HTML5 canvas tag.

function yuanhuan(ctx,data,option){

var cood=option.cood;

var radius=option.radius;

var lastpos=pos=0;

for(var i=0;i

ctx.beginPath();

ctx.moveTo(cood.x,cood.y);

ctx.fillStyle = data[i].bgcolor;

pos=lastpos+Math.PI*2*data[i].value/100;

ctx.arc(cood.x,cood.y,radius,lastpos,pos,false);

ctx.fill();

lastpos=pos;

}

ctx.beginPath();

ctx.fillStyle ="white";

radius*=0.5;

ctx.arc(cood.x,cood.y,radius,0,Math.PI*2 ,false);

ctx.fill();

}

var data=[

{bgcolor:'yellowgreen',value:30},

{bgcolor:'green',value:30},

{bgcolor:'yellow',value:40}

];

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

yuanhuan(ctx,data,{cood:{x:200,y:200},radius:150})