javascript+html5实现绘制圆环的方法

2019-11-20 11:58:34

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JavaScript编程中的Promise使用大全

下一篇：学习Bootstrap组件之下拉菜单