Canvas 实现 progress 效果

作者：梁伟盛

据说本贵族圈每月不分享就邀请雪糕。所以分享下一个简单的Canvas插件，Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画（反正就是好东西）。

既然是HTML5的特性，那必须是只有支持HTML5的浏览器才能使用，兼容性如下图：

使用到的API

参考资料~W3School

beginPath

定义：开始一条路径，或重置当前的路径。

      context.beginPath();

arc

定义：创建弧/曲线（用于创建圆或部分圆）。

      context.arc(x, y , r, sAngle, eAngle, counterclockwise);

参数

x：圆的中心的 x 坐标。
y：圆的中心的 y 坐标。
r：圆的半径。
sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle：结束角，以弧度计。
counterclockwise：可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。

stroke

定义：绘制当前路径的边框

    context.stroke()

measureText

    context.measureText(text).width;

定义：返回包含一个对象，该对象包含以像素计的指定字体宽度。

参数

text：要测量的文本

fillText

定义：在画布上绘制填色的文本

    context.fillText(text, x, y, maxWidth);

参数

text：规定在画布上输出的文本。
x：开始绘制文本的 x 坐标位置（相对于画布）。
y：开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth：可选。允许的最大文本宽度，以像素计。

clearRect

定义：清空给定矩形内的指定像素。

    context.clearRect(x, y, width, height);

参数

x：要清除的矩形左上角的 x 坐标
y：要清除的矩形左上角的 y 坐标
width：要清除的矩形的宽度，以像素计
height：要清除的矩形的高度，以像素计

实现思路

了解了以上API后，我们就可以动手干活了，其实很简单。实现只有3个步骤。

1，画出带有透明度的内圆

    context.beginPath();

    //设置透明度，样式与线条宽度
    this.extend(context, {
        globalAlpha: inSideCircle.alpha,
        strokeStyle: inSideCircle.style,
        lineWidth: inSideCircle.lineWidth
    })            

    //绘制圆
    context.arc(this.hElWidth, this.hElHeight, option.radius + outSideCircle.lineWidth - inSideCircle.lineWidth, 0, pi * 2, false);

    //画出圆形
    context.stroke();

2，根据进度画出外圆

    context.beginPath();

    //设置透明度，样式与线条宽度
    this.extend(context, {
        globalAlpha: outSideCircle.alpha,
        strokeStyle: outSideCircle.style,
        lineWidth: outSideCircle.lineWidth
    })                            

    //根据当前进度绘制圆
    context.arc(this.hElWidth, this.hElHeight, option.radius, -(pi / 2), pi * 2 / 100 * (n - 25), false);

    //画出圆形
    context.stroke();

3，根据进度画出数值(0-100%)

    context.beginPath();

    this.extend(context, {
        font: textObj.font,
        fillStyle: textObj.style,
        globalAlpha: textObj.alpha
    })            

    //得出数值宽度
    numberWidth = context.measureText(number).width;

    context.fillText(number, this.hElWidth - numberWidth / 2, this.hElHeight + 10 / 3)

最后暴露出setProgress设置进度函数给外部调用即可

    //清除canvas内容
    this.context.clearRect(0, 0, this.elWidth, this.elHeight);                            

    this._drawCircle(n);

    this._drawText(n);

测试用例

    <!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>