javascript+html5实现绘制圆环的方法
本文实例讲述了javascript+html5实现绘制圆环的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
</head>
<body>
<fieldset>
<canvasid="myCanvas"width="400px"height="400px">YourbrowserdoesnotsupporttheHTML5canvastag.</canvas>
</fieldset>
<scripttype="text/javascript">
functionyuanhuan(ctx,data,option){
varcood=option.cood;
varradius=option.radius;
varlastpos=pos=0;
for(vari=0;i<data.length;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();
}
vardata=[
{bgcolor:'yellowgreen',value:30},
{bgcolor:'green',value:30},
{bgcolor:'yellow',value:40}
];
varcanvas=document.getElementById("myCanvas");
varctx=canvas.getContext("2d");
yuanhuan(ctx,data,{cood:{x:200,y:200},radius:150})
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。