Shulou(Shulou.com)06/01 Report--

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

方法一：arc()实现画圆

代码：

#myCanvas{ margin: 0 auto; display: block; } 当前浏览器不支持canvas组件请升级! //方法一：arc 动态画圆 var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var mW = c.width = 300; var mH = c.height = 300; var lineWidth = 5; var r = mW / 2; //中间位置 var cR = r - 4 * lineWidth; //圆半径 var startAngle = -(1 / 2 * Math.PI); //开始角度 var endAngle = startAngle + 2 * Math.PI; //结束角度 var xAngle = 1 * (Math.PI / 180); //偏移角度量 var fontSize = 35; //字号大小 var tmpAngle = startAngle; //临时角度变量 //渲染函数 var rander = function(){ if(tmpAngle >= endAngle){ return; }else if(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 + 'px Microsoft Yahei'; ctx.textAlign='center'; ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2); requestAnimationFrame(rander); }; rander();

思路：

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

相关函数：

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

方法二：rotate() 动态画圆

代码：

#myCanvas{ margin: 0 auto; display: block; } 当前浏览器不支持canvas组件请升级! //方法二：rotate() 动态画圆 var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var mW = c.width = 300; var mH = c.height = 300; var lineWidth = 5; var r = mW / 2; //中间位置 var cR = r - 4 * lineWidth; //圆半径 var startAngle = -(1 / 2 * Math.PI); //开始角度 var endAngle = startAngle + 2 * Math.PI; //结束角度 var xAngle = 1 * (Math.PI / 180); //偏移角度量 var fontSize = 35; //字号大小 var tmpAngle = startAngle; //临时角度变量 //渲染函数 var rander = function(){ if(tmpAngle >= endAngle){ return; }else if(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(var i = 0; i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.