- <!DOCTYPE html>
- <html>
- <head>
- <title> </title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- </head>
- <body>
- <fieldset>
- <canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas>
- </fieldset>
- <script type="text/javascript">
- function yuanhuan(ctx,data,option){
- var cood=option.cood;
- var radius=option.radius;
- var lastpos=pos=0;
- for(var i=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();
- }
- 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})
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/2208201410272.html
来源: http://www.codesnippet.cn/detail/2208201410272.html