这篇文章给大家分享的是有关HTML中canvas如何实现圆圈进度条的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
实现h6 canvas圆圈进度条的实例代码,本人的想法有很多,但是利用canvas无疑是最方便的解决办法,在此以canvas实现为例子,具体实现步骤如下:
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> <!-- <script type="text/javascript" src="js/Progress.js"></script> --> </head> <body> <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas> <canvas id="canvas3"></canvas> <canvas id="canvas8"></canvas> <canvas id="canvas9"></canvas> <canvas id="canvas10"></canvas> <script type="text/javascript"> window.onload = function(){ new Progress().renderOne('canvas1',100,6,10);//id,画布宽和高,圆的半径 百分百。 new Progress().renderOne('canvas2',100,5,20); new Progress().renderOne('canvas3',100,5,30); new Progress().renderOne('canvas8',100,5,80); new Progress().renderOne('canvas9',100,5,90); new Progress().renderOne('canvas10',100,5,100); } function Progress() { var progress = { textheight: null, renderOne: function(id, length, r, percent) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); canvas.width = length; canvas.height = length; var i = 0; var interval = setInterval(function() { i++; progress.render(context, length, r, i, percent); if (i >= percent) { clearInterval(interval) } }, 10) }, render: function(context, length, r, i, percent) { context.clearRect(0, 0, length, length); context.beginPath(); var gradient = context.createLinearGradient(length, 0, 0, 0); gradient.addColorStop("0", "#76EEC6"); gradient.addColorStop("1.0", "#63B8FF"); context.strokeStyle = gradient; context.lineWidth = r; context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false); context.stroke(); context.closePath(); context.beginPath(); context.strokeStyle = "#8d8d8d"; context.strokeStyle ='red';///////////////////////////////////////////////// context.lineWidth = 2; context.fillStyle = "#ffffff"; context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false); context.stroke(); context.fill(); context.closePath(); context.beginPath(); var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI; var x = Math.cos(radian) * (length / 2 - r) + length / 2; var y = Math.sin(radian) * (length / 2 - r) + length / 2; context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false); context.stroke(); context.fill(); context.closePath(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = "#54DDAF"; context.fillStyle = "#54DDAF"; context.fillStyle = "blue";/////////////////////////////////////// context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI); context.fill(); context.closePath(); context.beginPath(); context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑"; context.fillStyle = "#ffffff"; var text = percent + "%"; textwidth = context.measureText(text).width; if (this.textheight == null) { var p = document.createElement("p"); document.body.appendChild(p); p.innerHTML = text; p.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px"; this.textheight = p.offsetHeight; p.parentNode.removeChild(p) } textheight = this.textheight; context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4); context.fill(); context.closePath() } }; return progress }; </script> </body> </html>
感谢各位的阅读!关于“HTML中canvas如何实现圆圈进度条”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。