這篇文章主要介紹了javascript+html5實現繪制圓環的方法,實例分析了javascript實現html5基于canvas繪制圓環的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript+html5實現繪制圓環的方法。分享給大家供大家參考。具體如下：
- <!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>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
