小编给大家分享一下在html5中如何使用Canvas完成三种动态画圆方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

方法一：arc()实现画圆

代码：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><styletype="text/css">#myCanvas{margin:0auto;display:block;}</style></head><body><canvasid="myCanvas">当前浏览器不支持canvas组件请升级！</canvas><scripttype="text/javascript">//方法一：arc动态画圆varc=document.getElementById('myCanvas');varctx=c.getContext('2d');varmW=c.width=300;varmH=c.height=300;varlineWidth=5;varr=mW/2;//中间位置varcR=r-4*lineWidth;//圆半径varstartAngle=-(1/2*Math.PI);//开始角度varendAngle=startAngle+2*Math.PI;//结束角度varxAngle=1*(Math.PI/180);//偏移角度量varfontSize=35;//字号大小vartmpAngle=startAngle;//临时角度变量//渲染函数varrander=function(){if(tmpAngle>=endAngle){return;}elseif(tmpAngle+xAngle>endAngle){tmpAngle=endAngle;}else{tmpAngle+=xAngle;}ctx.clearRect(0,0,mW,mH);//画圈ctx.beginPath();ctx.lineWidth=lineWidth;ctx.strokeStyle='#1c86d1';ctx.arc(r,r,cR,startAngle,tmpAngle);ctx.stroke();ctx.closePath();//写字ctx.fillStyle='#1d89d5';ctx.font=fontSize+'pxMicrosoftYahei';ctx.textAlign='center';ctx.fillText(Math.round((tmpAngle-startAngle)/(endAngle-startAngle)*100)+'%',r,r+fontSize/2);requestAnimationFrame(rander);};rander();</script></body></html>

思路：

通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。

相关函数：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);


方法二：rotate() 动态画圆

代码：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><styletype="text/css">#myCanvas{margin:0auto;display:block;}</style></head><body><canvasid="myCanvas">当前浏览器不支持canvas组件请升级！</canvas><scripttype="text/javascript">//方法二：rotate()动态画圆varc=document.getElementById('myCanvas');varctx=c.getContext('2d');varmW=c.width=300;varmH=c.height=300;varlineWidth=5;varr=mW/2;//中间位置varcR=r-4*lineWidth;//圆半径varstartAngle=-(1/2*Math.PI);//开始角度varendAngle=startAngle+2*Math.PI;//结束角度varxAngle=1*(Math.PI/180);//偏移角度量varfontSize=35;//字号大小vartmpAngle=startAngle;//临时角度变量//渲染函数varrander=function(){if(tmpAngle>=endAngle){return;}elseif(tmpAngle+xAngle>endAngle){tmpAngle=endAngle;}else{tmpAngle+=xAngle;}ctx.clearRect(0,0,mW,mH);//画圈ctx.save();ctx.beginPath();ctx.lineWidth=lineWidth;ctx.strokeStyle='#1c86d1';ctx.translate(r,r);//重定义圆点ctx.rotate(-Math.PI);//最上方为起点for(vari=0;i<=tmpAngle-startAngle;i+=xAngle){//绘图ctx.moveTo(0,cR-lineWidth);ctx.lineTo(0,cR);ctx.rotate(xAngle);//通过旋转角度和画点的方式绘制圆}ctx.stroke();ctx.closePath();ctx.restore();//写字ctx.fillStyle='#1d89d5';ctx.font=fontSize+'pxMicrosoftYahei';ctx.textAlign='center';ctx.fillText(Math.round((tmpAngle-startAngle)/(endAngle-startAngle)*100)+'%',r,r+fontSize/2);requestAnimationFrame(rander);};rander();</script></body></html>

思路：

通过重新定义圆点坐标为（0，0），然后通过在规定范围内旋转图形，进行单点绘制。

相关函数：

context.translate(x,y);

context.rotate(angle);方法三：获取圆坐标方式 动态画圆

代码：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><styletype="text/css">#myCanvas{margin:0auto;display:block;}</style></head><body><canvasid="myCanvas">当前浏览器不支持canvas组件请升级！</canvas><scripttype="text/javascript">//方法三：获取圆坐标方式动态画圆varc=document.getElementById('myCanvas');varctx=c.getContext('2d');varmW=c.width=300;varmH=c.height=300;varlineWidth=5;varr=mW/2;//中间位置varcR=r-4*lineWidth;//圆半径varstartAngle=-(1/2*Math.PI);//开始角度varendAngle=startAngle+2*Math.PI;//结束角度varxAngle=2*(Math.PI/180);//偏移角度量varcArr=[];//圆坐标数组//初始化圆坐标数组for(vari=startAngle;i<=endAngle;i+=xAngle){//通过sin()和cos()获取每个角度对应的坐标varx=r+cR*Math.cos(i);vary=r+cR*Math.sin(i);cArr.push([x,y]);}//移动到开始点varstartPoint=cArr.shift();ctx.beginPath();ctx.moveTo(startPoint[0],startPoint[1]);//渲染函数varrander=function(){//画圈if(cArr.length){ctx.lineWidth=lineWidth;ctx.strokeStyle='#1c86d1';vartmpPoint=cArr.shift();ctx.lineTo(tmpPoint[0],tmpPoint[1]);ctx.stroke();}else{cArr=null;return;}requestAnimationFrame(rander);};rander();</script></body></html>

以上是“在html5中如何使用Canvas完成三种动态画圆方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！