canvas又來啦，上次我用canvas做了一個圓，幾條線，一個矩形，這次我們用canvas來實現(xiàn)進(jìn)度條，也許我們的HTML5最強(qiáng)大的地方就在于CANVAS了，它可以畫出許多圖來，當(dāng)然了，對你的能力也是要求非常高的，我們今天這個進(jìn)度條，代碼也是不少的。。。
像這樣的東西，如何做？
我們這個進(jìn)度條的寬度為300px，高度為34px，起點座標(biāo)為(20,20)，半徑為高度的一半。。。
在這個代碼中，有一個函數(shù)：createLinearGradient() ，我從百度中得到它的用法：createLinearGradient() 方法創(chuàng)建一條線性顏色漸變。返回一個線性顏色漸變的一個 CanvasGradient對象。我們的漸變色彩就是通過這個函數(shù)獲得的。。。
在這里，我們定義了一個draw函數(shù)，再用上clearInterval和setInterval來實現(xiàn)進(jìn)度的功能。。。在draw函數(shù)里，我們要調(diào)用progressLayerRect，progressBarRect，progressText這三個函數(shù)。
progressLayerRect，用于實現(xiàn)外層的圖形，progressBarRect用于實現(xiàn)進(jìn)度的圖片，progressText用于實現(xiàn)我們看到的百分比。
我們的text是通過math.floor獲得的。。。
總得來說，要實現(xiàn)這個進(jìn)度條，非常不容易，必須對canvas非常熟悉，另外，還需要數(shù)學(xué)計算方面的技能