Canvas 实现 progress 效果

This topic created in 3337 days ago, the information mentioned may be changed or developed.

canvas 实在是 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

No Comments Yet

meta canvas progress script