1、canvas画进度条时，由于内部部分文字是不动，渐变色可以由动态一笔笔画出
html代码：
1 <div> 2 <canvas id="gameCanvas"> 3 您的浏览器不支持Canvas标签！ 4 canvas> 5 <canvas id="earthCanvas"> 6 您的浏览器不支持Canvas标签！ 7 canvas> 8 div>
css代码：在布局中注意以下两点
1、在同一个div中，需要把动态随定时器改变的部分放在一个canvas中；
2、把静态的文字等可以放在一个canvas中，或者一个静态div中，利用position: absolute;定位让两个元素重叠，视图中即可显示
1 #earthCanvas,#gameCanvas { 2 width: 100%; 3 height: 15em; 4 position: absolute; 5 }
js代码：miletargetTarmileage为进度条为100%时数值，progress为项目当前的进度
1 function canvasProgrss(miletargetTarmileage, progress) { 2 var canvasWidth = $("#gameCanvas").width(); 3 var canvasHeight = $("#gameCanvas").height(); 4 var canvas = document.getElementById('gameCanvas'); //画布对象 5 canvas.width = canvasWidth; 6 canvas.height = canvasHeight; 7 var ctx = canvas.getContext('2d'); 8 //var progress = 50; 当前已加载的进度 9 var progressPercent=progress*100/miletargetTarmileage; 10 if(miletargetTarmileage<=0){ 11 progressPercent=100; 12 }; 13 if(progress==0){ 14 progressPercent=0; 15 } 16 function canvastxt(progress,progressPercent) { 17 ctx.lineWidth = 10; 18 ctx.strokeStyle = '#fda2a2'; 19 ctx.clearRect(0, 0, canvasWidth, canvasHeight); //清除已绘制内容 20 ctx.beginPath(); 21 ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, 0, 180); 22 ctx.stroke(); //对路径进行描边 23 ctx.closePath(); 24 var txtday = progress; 25 ctx.font = '60px 微软雅黑'; 26 ctx.fillStyle = '#fff'; 27 var txtdayWidth = ctx.measureText(txtday).width; 28 ctx.fillText(txtday, canvasWidth / 2 - txtdayWidth / 2, canvasHeight / 2 + 20); //绘制进度提示文字 29 var txtkm = "目标:" + miletargetTarmileage + "km"; 30 ctx.font = '1em 微软雅黑'; 31 ctx.lineWidth = 1; 32 var txtkmWidth = ctx.measureText(txtkm).width; 33 ctx.fillText(txtkm, canvasWidth / 2 - txtkmWidth / 2, canvasHeight / 3); 34 //写“km” 35 var txtkm = "km"; 36 ctx.font = '1em 微软雅黑'; 37 ctx.lineWidth = 1; 38 var txtkmWidth = ctx.measureText(txtkm).width; 39 ctx.fillText(txtkm, canvasWidth / 2 - txtkmWidth / 2, 5 * canvasHeight / 7); 40 //划外圆 41 ctx.closePath(); 42 ctx.beginPath(); 43 ctx.arc(canvasWidth / 2, canvasHeight / 2, 100, 0, 180); 44 ctx.stroke(); //对路径进行描边 45 ctx.closePath(); 46 var d=0; 47 ctx.lineWidth = 10; 48 if(progressPercent>=100){ 49 ctx.beginPath(); 50 ctx.strokeStyle = 'rgb(0,255,0)'; 51 ctx.lineWidth = 10; 52 var startAngle = -90 * Math.PI / 180; 53 var endAngle = (-90 + 360 * progressPercent / 100) * Math.PI / 180; 54 ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, startAngle, endAngle); 55 ctx.stroke(); 56 }else{ 57 var timer = setInterval(function(){ 58 //ctx.clearRect(0,0,canvasWidth,canvasHeight); 59 ctx.beginPath(); 60 var startAngle = (-90 + 360 * (d++) / 500) * Math.PI / 180; 61 var endAngle = (-90 + 360 * d / 500) * Math.PI / 180; 62 ctx.arc(canvasWidth / 2, canvasHeight / 2,80,startAngle, endAngle); 63 ctx.strokeStyle = "rgb("+(255-d*0.5)+",255,"+(255-d*0.5)+")"; 64 ctx.stroke(); 65 console.log(progressPercent); 66 console.log(d); 67 if (d > progressPercent*5) { 68 clearInterval(timer); 69 } 70 },10); 71 } 72 /*ctx.beginPath(); 73 74 ctx.strokeStyle = '#d7fa82'; 75 ctx.lineWidth = 10; 76 var startAngle = -90 * Math.PI / 180; 77 console.log(progressPercent); 78 var endAngle = (-90 + 360 * progressPercent / 100) * Math.PI / 180; 79 ctx.arc(canvasWidth / 2, canvasHeight / 2, 80, startAngle, endAngle); 80 ctx.stroke(); //对路径进行描边 */ 81 } 82 //划旋转小球 83 var canvas1 = document.getElementById('earthCanvas'); //画布对象 84 canvas1.width = canvasWidth; 85 canvas1.height = canvasHeight; 86 var ctx1 = canvas1.getContext('2d'); 87 var imgearth = new Image(); 88 imgearth.src = "img/images/card_07.png"; 89 imgearth.onload = function() { 90 var n = 0; 91 var i = 0; 92 ctx1.translate(canvasWidth / 2, canvasHeight / 2); 93 var timer = setInterval(function() { 94 ctx1.clearRect(0, 0, canvasWidth, canvasHeight); 95 n = n * Math.PI / 100; 96 ctx1.rotate(n++); 97 ctx1.drawImage(imgearth, 95, 0, 10, 10); 98 }, 100); 99 100 } 101 canvastxt(progress,progressPercent); 102 }
最终显示效果：
