HTML5 canvas实现百分比进度条

canvas又来啦，上次我用canvas做了一个圆，几条线，一个矩形，这次我们用canvas来实现进度条，也许我们的HTML5最强大的地方就在于CANVAS了，它可以画出许多图来，当然了，对你的能力也是要求非常高的，我们今天这个进度条，代码也是不少的。。。

像这样的东西，如何做？

我们这个进度条的宽度为300px，高度为34px，起点座标为(20,20)，半径为高度的一半。。。

在这个代码中，有一个函数：createLinearGradient() ，我从百度中得到它的用法：createLinearGradient() 方法创建一条线性颜色渐变。返回一个线性颜色渐变的一个 CanvasGradient对象。我们的渐变色彩就是通过这个函数获得的。。。

在这里，我们定义了一个draw函数，再用上clearInterval和setInterval来实现进度的功能。。。在draw函数里，我们要调用progressLayerRect，progressBarRect，progressText这三个函数。

progressLayerRect，用于实现外层的图形，progressBarRect用于实现进度的图片，progressText用于实现我们看到的百分比。

我们的text是通过math.floor获得的。。。

总得来说，要实现这个进度条，非常不容易，必须对canvas非常熟悉，另外，还需要数学计算方面的技能