canvas畫圓形進度條（動態+漸變）

1、canvas畫進度條時，由於內部部分文字是不動，漸變色可以由動態一筆筆畫出

     html代碼：

            <div>
                <canvas id="gameCanvas">
                    您的瀏覽器不支持Canvas標簽！
                </canvas>
                <canvas id="earthCanvas">
                    您的瀏覽器不支持Canvas標簽！
                </canvas>
            </div>

　　css代碼：在布局中注意以下兩點

　　　　1、在同一個div中，需要把動態隨定時器改變的部分放在一個canvas中；

　　　　2、把靜態的文字等可以放在一個canvas中，或者一個靜態div中，利用position: absolute;定位讓兩個元素重疊，視圖中即可顯示

#earthCanvas,#gameCanvas {
                width: 100%;
                height: 15em;
                position: absolute;
            }

　　js代碼：miletargetTarmileage為進度條為100%時數值，progress為項目當前的進度

        function canvasProgrss(miletargetTarmileage, progress) {
            var canvasWidth = $("#gameCanvas").width();
            var canvasHeight = $("#gameCanvas").height();
            var canvas = document.getElementById('gameCanvas'); //畫布對象
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            var ctx = canvas.getContext('2d');
            //var progress = 50; 當前已加載的進度
            var progressPercent=progress*100/miletargetTarmileage;
            if(miletargetTarmileage<=0){
                progressPercent=100;
            };
            if(progress==0){
                progressPercent=0;
            }
            function canvastxt(progress,progressPercent) {
                ctx.lineWidth = 10;
                ctx.strokeStyle = '#fda2a2';
                ctx.clearRect(0, 0, canvasWidth, canvasHeight); //清除已繪制內容
                ctx.beginPath();
                ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, 0, 180);
                ctx.stroke(); //對路徑進行描邊 
                ctx.closePath();
                var txtday = progress;
                ctx.font = '60px 微軟雅黑';
                ctx.fillStyle = '#fff';
                var txtdayWidth = ctx.measureText(txtday).width;
                ctx.fillText(txtday, canvasWidth / 2 - txtdayWidth / 2, canvasHeight / 2 + 20); //繪制進度提示文字
                var txtkm = "目標:" + miletargetTarmileage + "km";
                ctx.font = '1em 微軟雅黑';
                ctx.lineWidth = 1;
                var txtkmWidth = ctx.measureText(txtkm).width;
                ctx.fillText(txtkm, canvasWidth / 2 - txtkmWidth / 2, canvasHeight / 3);
                //寫“km”
                var txtkm = "km";
                ctx.font = '1em 微軟雅黑';
                ctx.lineWidth = 1;
                var txtkmWidth = ctx.measureText(txtkm).width;
                ctx.fillText(txtkm, canvasWidth / 2 - txtkmWidth / 2, 5 * canvasHeight / 7);
                //划外圓
                ctx.closePath();
                ctx.beginPath();
                ctx.arc(canvasWidth / 2, canvasHeight / 2, 100, 0, 180);
                ctx.stroke(); //對路徑進行描邊 
                ctx.closePath();
                var d=0;
                ctx.lineWidth = 10;
                if(progressPercent>=100){
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgb(0,255,0)';
                    ctx.lineWidth = 10;
                    var startAngle = -90 * Math.PI / 180;
                    var endAngle = (-90 + 360 * progressPercent / 100) * Math.PI / 180;
                    ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, startAngle, endAngle);
                    ctx.stroke();
                }else{
                    var timer = setInterval(function(){
                    //ctx.clearRect(0,0,canvasWidth,canvasHeight);
                    ctx.beginPath();
                    var startAngle = (-90 + 360 * (d++) / 500) * Math.PI / 180;
                    var endAngle = (-90 + 360 * d / 500) * Math.PI / 180;
                    ctx.arc(canvasWidth / 2, canvasHeight / 2,80,startAngle, endAngle);
                    ctx.strokeStyle = "rgb("+(255-d*0.5)+",255,"+(255-d*0.5)+")";
                    ctx.stroke();
                    console.log(progressPercent);
                    console.log(d);
                    if (d > progressPercent*5) {
                        clearInterval(timer);
                    }
                },10);
                }
                /*ctx.beginPath();

                ctx.strokeStyle = '#d7fa82';
                ctx.lineWidth = 10;
                var startAngle = -90 * Math.PI / 180;
                console.log(progressPercent);
                var endAngle = (-90 + 360 * progressPercent / 100) * Math.PI / 180;
                ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, startAngle, endAngle);
                ctx.stroke(); //對路徑進行描邊 */
            }
            //划旋轉小球
            var canvas1 = document.getElementById('earthCanvas'); //畫布對象
            canvas1.width = canvasWidth;
            canvas1.height = canvasHeight;
            var ctx1 = canvas1.getContext('2d');
            var imgearth = new Image();
            imgearth.src = "img/images/card_07.png";
            imgearth.onload = function() {
                var n = 0;
                var i = 0;
                ctx1.translate(canvasWidth / 2, canvasHeight / 2);
                var timer = setInterval(function() {
                    ctx1.clearRect(0, 0, canvasWidth, canvasHeight);
                    n = n * Math.PI / 100;
                    ctx1.rotate(n++);
                    ctx1.drawImage(imgearth, 95, 0, 10, 10);
                }, 100);
                
            }
            canvastxt(progress,progressPercent);
        }

最終顯示效果：