canvas教程

canvas实现简易的圆环进度条效果

字号+ 作者:H5之家 来源:H5之家 2017-04-13 10:00 我要评论( )

本文主要分享了canvas实现简易的圆环进度条效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> canvas{ border: 1px solid #1F232A; } .div{ width: 400px; height: 50px; } input,button{ text-align: center; font-size: 20px; } </style> <body> <canvas id="main" width="450" height="300"></canvas> <div class="div"> 进度:<input id="num" type="number" value="100" max="100"/> <button id="makeSure">确定</button> </div> </body> <script type="text/javascript"> var makeSure=document.getElementById("makeSure"); makeSure.onclick=function(){ var ctx=document.getElementById("main").getContext("2d"); ctx.clearRect(0,0,450,300); var num=parseInt(document.getElementById("num").value)+1; if(num<=101){ for (var x=0;x<num;x++) { (function(x){ setTimeout(function(){ ctx.beginPath() ctx.lineWidth=10; ctx.strokeStyle='orange'; ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180); ctx.stroke(); ctx.clearRect(390,25,50,50); ctx.clearRect(175,175,55,55) ctx.fillStyle = 'orange'; ctx.fillRect(10+x*3.5,30,3.5,40); ctx.font="20px Arial"; ctx.fillText(x+"%",390,58) ctx.fillText(x+"%",175,208) },x*30); })(x); } }else{ alert("请输入0-100之间的数字") } } makeSure.click(); </script> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Canvas实现放射线动画效果

    Canvas实现放射线动画效果

    2017-04-13 10:01

  • HTML5 Canvas绘制圆点虚线实例_html5教程技巧

    HTML5 Canvas绘制圆点虚线实例_html5教程技巧

    2017-04-13 10:01

  • Android Canvas练习题(6)饼图(Pie Chart)百分比标注位置计算技巧

    Android Canvas练习题(6)饼图(Pie Chart)百分比标注位置计算技巧

    2017-04-12 11:00

  • html5 canvas 绘图教程

    html5 canvas 绘图教程

    2017-04-12 08:05

网友点评