HTML5 canvas基础---简单的圆形进度条

来源：互联网发布：springmvc 初始化数据编辑：程序博客网时间：2024/06/11 06:23

<!DOCTYPE html><html><head><title></title><style>.a{position: relative;}#myCanvas{position: absolute;}.num{width:41px;line-height: 41px;text-align: center;border-radius: 100%;border:1px solid #E6E6E6;}</style></head><body><div class="a"><canvas id="myCanvas" width="50" height="50">Your browser does not support the HTML5 canvas tag.</canvas><div class="num" id='num'>12</div></div><input type="tel" id="txt" /><button onclick="cc()">点击</button><script>function cc(){var $num=document.getElementById('txt').value;    document.getElementById('num').innerText=$num;var num=Math.PI*(1.5+2*($num/100));//顺时针var c=document.getElementById("myCanvas");c.width = c.width;//清除画布var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(22,22,20,Math.PI*1.5,num,false);ctx.strokeStyle='rgba(0,0,0,0.3)';ctx.lineWidth=2;ctx.stroke();}</script><script></script> </body></html>

0 0