这是一个创建于 3186 天前的主题，其中的信息可能已经有所发展或是发生改变。
cavas 实在是 h5 里的好东西！
收录待用，修改转载已取得腾讯云授权
效果如图：
实现思路:
- 画出带有透明度的内圆
- 根据进度画出外圆
- 根据进度画出数值(0-100%)
- 最后暴露出 setProgress 设置进度函数给外部调用即可
用到的 API ： http://www.w3school.com.cn/tags/html_ref_canvas.asp
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" cOntent="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta cOntent="yes"name="apple-mobile-web-app-capable"/> <meta cOntent="black"name="apple-mobile-web-app-status-bar-style"/> <meta name="format-detection"cOntent="telphOne=no"/> <title>canvasProgress</title> </head> <body> <canvas id="canvasEl" style="background-color:#000" height="100px" width="100px"></canvas> </body> <script type="text/Javascript" src="progress.js"></script> <script type="text/Javascript"> var progress = new Progress({element: document.getElementById('canvasEl')}) var n = 0; var timer = setInterval(function() { if (n++ !== 100) { progress.setProgress(n); } else { clearInterval(timer); } }, 100) </script> </html> Git : https://github.com/vincentlws/canvasProgress
原文来自：https://www.qcloud.com/community/article/762798001489391689
目前尚无回复
Select Language