HTML5 canvas繪製倒計時+環形進度條

標籤：sed   save   設計   length   idt   rtx   ida   line   dig   

需求：

1.頁面在進入時後台會提供一個固定時間和固定百分比，例如：18小時16分30秒，25%
2.頁面要求在進入時，有環形進度條從0推進到25%的效果，進度條旁的顯示進度的黃色方塊要始終保持跟隨進度條最前方
3.環形進度條中間計時器，要從擷取到 具體時間後開始倒計時

設計圖：

JS代碼如下：

//補零
function setDigit(num, n)
{
var str=‘‘+num;
if(str.length<n)
{
str=‘0‘+str;
}
return str;
}
//設定時間
function reDate(year, month, day, hour, minute, second){
var obj=new Date();
obj.setFullYear(parseInt(year));
obj.setMonth(parseInt(month)-1);
obj.setDate(parseInt(day));
obj.setHours(parseInt(hour));
obj.setMinutes(parseInt(minute));
obj.setSeconds(parseInt(second));
return obj.getTime();
}
//倒計時
function timeReduce(timesum,obj){
var iHour=setDigit(parseInt(timesum/3600),2);
timesum%=3600;

var iMin=setDigit(parseInt(timesum/60),2);
timesum%=60;

var iSec=setDigit(parseInt(timesum),2);

obj.innerHTML=iHour+‘:‘+iMin+‘:‘+iSec;
}
//百分比背景
function drawPerBack(context,centerX, centerY,iUsePi, width, height, radius, type,scale){
if(0<iUsePi && iUsePi<(Math.PI*0.5))
{
x=centerX+200*Math.cos(iUsePi)+22;
y=centerY+200*Math.sin(iUsePi)-5;
leftTri(context, x, y);
}else if((Math.PI/2)<iUsePi && iUsePi <Math.PI)
{
x=centerX+200*Math.cos(iUsePi)-105;
y=centerY+200*Math.sin(iUsePi)-28;
rightTri(context, x, y);
}else if(Math.PI<iUsePi && iUsePi<(Math.PI*1.5))
{
x=centerX+200*Math.cos(iUsePi)-98;
y=centerY+200*Math.sin(iUsePi)-35;
rightTri(context, x, y);
}
else{
x=centerX+200*Math.cos(iUsePi)+28;
y=centerY+200*Math.sin(iUsePi)-20;
leftTri(context, x, y);
}
context.save();
context.beginPath();
context.moveTo(x, y+radius);
context.lineTo(x, y+height-radius);
context.quadraticCurveTo(x, y+height, x+radius, y+height);
context.lineTo(x+width-radius, y+height);
context.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
context.lineTo(x+width, y+radius);
context.quadraticCurveTo(x+width, y, x+width-radius, y);
context.lineTo(x+radius, y);
context.quadraticCurveTo(x, y, x, y+radius);
context[type + ‘Style‘] = ‘#ffad2d‘ || params.color;
context.closePath();
context[type]();
context.font = "bold 23pt Arial";
context.fillStyle="#fff206";
context.fillText((scale*100).toFixed(0)+"%", x+12, y+33);
context.restore();
}
//灰色圈
function circle2(canvas,context,centerX,centerY,r){
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.lineWidth = 20;
context.strokeStyle = "#db5c39";
context.beginPath();
context.arc(centerX,centerY,r, 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//黃色弧線
function yellArc(context,centerX,centerY,r,iUsePi){
context.save();
context.strokeStyle = "#fff206";
context.lineWidth = 20;
context.lineCap="round";
context.beginPath();
context.arc(centerX, centerY,r, -Math.PI/2, iUsePi, false);
context.stroke();
context.closePath();
context.restore();
}
//左邊三角
function leftTri(context, x, y) {
context.save();
context.beginPath();
context.moveTo(x+1,y+11);
context.lineTo(x+1,y+33);
context.lineTo(x-10,y+22);
context.fillStyle="#ffad2d";
context.closePath();
context.fill();
context.restore();
}
//右邊三角
function rightTri(context, x, y) {
context.save();
context.beginPath();
context.moveTo(x+79,y+11);
context.lineTo(x+79,y+33);
context.lineTo(x+90,y+22);
context.fillStyle="#ffad2d";
context.closePath();
context.fill();
context.restore();
}

function JinDu1(timer,obj,r,timeTxt,inPer,iDateEnd,iDateStart,iRemain,rad){
var context = obj.getContext(‘2d‘),
centerX = obj.width/2,
centerY = obj.height/2;

var oDateNow=new Date();
var iRest=(iDateEnd-oDateNow.getTime())/1000;
var iUsed=(oDateNow.getTime()-iDateStart)/1000;
var scale=iUsed/iRemain;
if((inPer/100)<scale)
{
iUsePi=-Math.PI/2+rad*iRemain*inPer/100;
}else if((inPer/100)>scale)
{
inPer=100*scale;
clearInterval(timer);
return false;
}
//灰色圈 
circle2(obj,context,centerX,centerY,r); 
if(iRest<0)
{
return;
} 
//倒計時
timeReduce(iRest,timeTxt);
//黃色圈
yellArc(context,centerX,centerY,r,iUsePi); 
//百分比
drawPerBack(context,centerX, centerY,iUsePi, 80, 44, 10, ‘fill‘, inPer/100); 
}

function JinDu2(obj,r,timeTxt,inPer,iDateEnd,iDateStart,iRemain,rad){
var context = obj.getContext(‘2d‘),
centerX = obj.width/2, 
centerY = obj.height/2; 
var oDateNow=new Date();
var iRest=(iDateEnd-oDateNow.getTime())/1000;
var iUsed=(oDateNow.getTime()-iDateStart)/1000;
var scale=iUsed/iRemain; 
if((inPer/100)<scale)
{
return false;
}else if((inPer/100)>scale)
{
inPer=100*scale;
var iUsePi=-Math.PI/2+rad*iUsed;
}
//灰色圈 
circle2(obj,context,centerX,centerY,r); 
if(iRest<0)
{
return;
} 
//倒計時
timeReduce( iRest, timeTxt);
//黃色外圈
yellArc(context,centerX,centerY,r,iUsePi); 
//百分比
drawPerBack(context,centerX, centerY,iUsePi, 80, 44, 10, ‘fill‘, scale);
}

 

window.onload = function(){
var canvas = document.getElementById(‘canvas‘);
var oTime = document.getElementById(‘time‘);
var oPer = document.getElementById(‘perTxt‘);
var iDateEnd=reDate(2017,4,6,18,0,0);
var iDateStart=reDate(2017,4,2,18,15,10);
var iRemain=(iDateEnd-iDateStart)/1000;
var rad = Math.PI*2/iRemain;
var inPer=0;
var timer1=null;
var timer2=null;
timer1=setInterval(function(){
inPer += 0.2;
JinDu1(timer1,canvas,200,oTime,inPer,iDateEnd,iDateStart,iRemain,rad);
},10);
JinDu2(canvas,200,oTime,inPer,iDateEnd,iDateStart,iRemain,rad);
timer2=setInterval(function(){
JinDu2(canvas,200,oTime,inPer,iDateEnd,iDateStart,iRemain,rad);
},1000);
}

 以上代碼還需最佳化，如那裡不對，還請廣大碼農指教！

HTML5 canvas繪製倒計時+環形進度條