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绘制倒计时+环形进度条

标签：sed   save   设计   length   idt   rtx   ida   line   dig   

原文地址：http://www.cnblogs.com/sheandhe/p/6687713.html