HTML部分：
1 <canvas id="canvas" width="32" height="32"> 2 您的瀏覽器不支持canvas 3 </canvas>
js部分：
1 function drawCircleInTd(v_id, v_n, v_percent) { 2 var canvas = document.getElementById(v_id), 3 context = canvas.getContext("2d"), 4 cirX = canvas.width / 2, 5 cirY = canvas.height / 2, 6 rad = Math.PI * 2 / 100, 7 n = parseFloat(v_n), 8 speed_percent = 1, 9 speed_text = 0.1; 10 var r = 14; 11 12 //繪制最外層細圈 13 function writeCircle() { 14 context.save(); //save和restore可以保證樣式屬性只運用於該段canvas元素 15 context.beginPath(); //開始路徑 16 context.strokeStyle = "#49f"; //設置邊線的顏色 17 context.arc(cirX, cirY, r, 0, Math.PI * 2, false); //畫一個整圓. 18 context.stroke(); //繪制邊線 19 context.restore(); 20 } 21 22 //繪制文本 23 function writeText(n) { 24 context.save(); 25 context.strokeStyle = "#49f"; 26 context.font = "10px Arial"; //設置字體大小和字體 27 context.strokeText(n.toFixed(0), cirX - 3, cirY + 5); //這里改中心顯示的數值和X,Y坐標. 28 context.stroke(); 29 context.restore(); 30 } 31 32 //繪制藍色外圈 33 function writeBlue(n) { 34 context.save(); 35 context.strokeStyle = "#FA5377"; 36 context.lineWidth = 4; 37 context.beginPath(); 38 context.arc(cirX, cirY, r, -Math.PI / 2, -Math.PI / 2 + rad * n, false); //這里改初始化百分比 39 // context.closePath(); 40 // context.fill(); 41 context.stroke(); 42 context.restore(); 43 } 44 45 function DreamLoading() { 46 //清除所有，重新繪制 47 context.clearRect(0, 0, canvas.width, canvas.height) 48 49 writeCircle(); 50 writeText(speed_text); 51 writeBlue(speed_percent); 52 53 if (speed_percent < v_percent) { 54 speed_percent++; 55 } 56 else { 57 context.closePath(); 58 } 59 60 if (speed_text < n) { 61 speed_text += 0.05; 62 } 63 else { 64 context.closePath(); 65 } 66 67 //setTimeout(DreamLoading,speed); 68 requestAnimationFrame(DreamLoading); 69 } 70 71 DreamLoading(); 72 }
最終效果圖:
