design的前端开发博客

查看效果

canvasClock.js代码：

/*
* Canvas Clock
* @author: design
* @copyright: wxwdesign.com
* @options: {
    size:100,  //clock size(width and height)
    type:'2d',  //canvas context type
    clockBgType:1, //the clock background type
    parent:document.body, //where you want to show the clock
    fontColor:'#ff0000',  //the clock number color
    canvasBgColor:'#999999', //the canvas area background color
    showClockBorder:true,  //show the border of the clock or not
    clockBgColor:'#ff00ff', //the clock circle panel area color
    strokeColor:'#000000',  //default line color
    fillColor:'#ffffff',    //default fill color
    reFreshInterval:1000,   //the clock handle refresh time interval
  }
*/
//create canvasClock Class
function canvasClock(options){
  this.clock=null;
  this.canvasElem=null;
  this.constM=Math.PI/180;
  this.semiSize=0;
  this.defaultOptions={size:110,type:'2d',clockBgType:1,parent:document.body,strokeColor:'#000000',fillColor:'#ffffff',reFreshInterval:1000};
  this.options=options;
}
//show the clock
canvasClock.prototype.show=function(){
  this.canvasElem.width=this.canvasElem.width;
  if(this.defaultOptions.clockBgType===2){
    this.runCircle();
  }else{
   this.drawBg();
   this.drawHandle();
  }
  var that=this;
  setTimeout(function(){that.show()},this.defaultOptions.reFreshInterval);
}
//init the clock
canvasClock.prototype.init=function(){
    if(!this.create()){return false;}
  this.show();
}
//create canvas area
canvasClock.prototype.create=function(){
  this.extend(this.defaultOptions,this.options);
  this.semiSize=this.defaultOptions.size/2;
  if(this.defaultOptions.id){
    this.canvasElem=document.getElementById(this.defaultOptions.id);
  }else{
      this.canvasElem=document.createElement('canvas');
  }
  if(!this.canvasElem.getAttribute('width')){this.canvasElem.setAttribute('width',this.defaultOptions.size);}
  if(!this.canvasElem.getAttribute('height')){this.canvasElem.setAttribute('height',this.defaultOptions.size);}
  this.defaultOptions.parent.appendChild(this.canvasElem);
  if(this.canvasElem.getContext&&this.canvasElem.getContext(this.defaultOptions.type)){
    this.clock=this.canvasElem.getContext(this.defaultOptions.type);
    return true;
  }else{
    alert('抱歉，IE无法查看此效果，使用新版的Firefox或者Chrome吧！');
      return false;
  }

}
//draw circle run
canvasClock.prototype.runCircle=function(){
  var time=new Date();
  var Hour=time.getHours();
  if(Hour>12){Hour-=12;}
  var Min=time.getMinutes();
  var Sec=time.getSeconds();
    var MilliSec=time.getMilliseconds();
  var angleHour=((Sec/3600+Min/60+Hour)*30-90)*this.constM;
  var angleMinute=((Min/60)*360-90)*this.constM;
  var angleSecond=((Sec/60)*360-90)*this.constM;
  var angleMilliSec=MilliSec/1000/60*360;
    angleSecond+=angleMilliSec*this.constM;
  //遮盖1
  this.clock.fillStyle='#333333';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize),
        angleStart:0,
        angleEnd:360*this.constM,
        fill:true});
  //秒盘
  this.clock.fillStyle='#F5BC38';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize),
        angleStart:-90*this.constM,
        angleEnd:angleSecond,
        fill:true,
        sector:true});
  //遮盖2
  this.clock.fillStyle='#666666';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize*0.8),
        angleStart:0,
        angleEnd:360*this.constM,
        fill:true});
  //分盘
  this.clock.fillStyle='#419C3B';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize*0.8),
        angleStart:-90*this.constM,
        angleEnd:angleMinute,
        fill:true,
        sector:true});
  //遮盖3
  this.clock.fillStyle='#999999';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize*0.6),
        angleStart:0,
        angleEnd:360*this.constM,
        fill:true});
  //时盘
  this.clock.fillStyle='#EB3D2F';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize*0.6),
        angleStart:-90*this.constM,
        angleEnd:angleHour,
        fill:true,
        sector:true});
  //中心圆盘
  this.clock.fillStyle='#2466CB';
  this.drawArc({
        canvas:this.clock,
        centerX:this.semiSize,
        centerY:this.semiSize,
        radius:Math.round(this.semiSize*0.4),
        angleStart:0,
        angleEnd:360*this.constM,
        fill:true});
  //数字时间
  this.clock.font='12px Verdana';
  this.clock.fillStyle='#ffffff';
  if(Min<10){Min='0'+Min;}
  if(Sec<10){Sec='0'+Sec;}
  this.clock.fillText(time.getHours()+':'+Min+':'+Sec,this.defaultOptions.size*0.36,this.defaultOptions.size*0.52);
}
//draw the clock panel
canvasClock.prototype.drawBg=function(){
  var sep=12;
  var angle=0;
  //canvas背景颜色
  if(this.defaultOptions.canvasBgColor){
    this.clock.fillStyle=this.defaultOptions.canvasBgColor;
    this.clock.fillRect(0,0,this.defaultOptions.size,this.defaultOptions.size);
  }
  //是否显示边框
  if(this.defaultOptions.showClockBorder||this.defaultOptions.clockBgColor){
    this.clock.beginPath();
    this.clock.arc(this.semiSize,this.semiSize,this.semiSize-1,0,360,false);
    //clock background
    if(this.defaultOptions.clockBgColor){
      this.clock.fillStyle=this.defaultOptions.clockBgColor;
      this.clock.fill();
    }
    if(this.defaultOptions.showClockBorder){
        this.clock.stroke();
    }
      this.clock.closePath();
  }
  //字体颜色
  if(this.defaultOptions.fontColor){this.clock.fillStyle=this.defaultOptions.fontColor;}
  this.clock.font='12px Georgia';
  for(var i=0;i<sep;i++){
      angle=(360/sep)*i*this.constM; //转换角度到弧度
    if(this.defaultOptions.clockBgType===0){
      this.drawArc({
          canvas:this.clock,
          centerX:Math.round(Math.cos(angle)*(this.semiSize-5))+this.semiSize,
          centerY:Math.round(Math.sin(angle)*(this.semiSize-5))+this.semiSize,
          radius:2,
          angleStart:0,
          angleEnd:360,
          fill:true});
    }else if(this.defaultOptions.clockBgType===1){
        var n=i+3;
      if(n>12){n-=12;}
        this.clock.fillText(n,Math.round(Math.cos(angle)*(this.semiSize-8))+(this.semiSize-4),Math.round(Math.sin(angle)*(this.semiSize-8))+(this.semiSize+4));
    }
  }
}
//draw the clock handle
canvasClock.prototype.drawHandle=function(){
       var time=new Date();
     var Hour=time.getHours();
     if(Hour>12){Hour-=12;}
     var Min=time.getMinutes();
     var Sec=time.getSeconds();
     var angleHour=(90-(Sec/3600+Min/60+Hour)*30)*this.constM;
     var angleMinute=(90-(Min/60)*360)*this.constM;
     var angleSecond=(90-(Sec/60)*360)*this.constM;
     if((this.defaultOptions.reFreshInterval%1000)!=0){
       var MilliSec=time.getMilliseconds();
       var angleMilliSec=-MilliSec/1000/60*360*this.constM;
     angleSecond+=angleMilliSec;
     }

     //时针
     this.drawLine(this.clock,4,Math.round((this.semiSize)*0.4),angleHour);
     //分针
     this.drawLine(this.clock,2,Math.round((this.semiSize)*0.6),angleMinute);
     //秒针
     this.drawLine(this.clock,1,Math.round((this.semiSize)*0.8),angleSecond);
     //中心轴
     this.drawArc({
          canvas:this.clock,
          centerX:this.semiSize,
          centerY:this.semiSize,
          radius:5,
          angleStart:0,
          angleEnd:360,
          fill:true});
     this.clock.fillStyle='#999999';
     this.drawArc({
          canvas:this.clock,
          centerX:this.semiSize,
          centerY:this.semiSize,
          radius:2,
          angleStart:0,
          angleEnd:360,
          fill:true});
}
//draw line
canvasClock.prototype.drawLine=function(canvas,lineWidth,r,angle){
       canvas.lineWidth=lineWidth;
     canvas.beginPath();
     canvas.moveTo(this.semiSize,this.semiSize);
     canvas.lineTo(Math.round(Math.cos(angle)*r)+this.semiSize,-Math.round(Math.sin(angle)*r)+this.semiSize);
     canvas.stroke();
     canvas.closePath();
}
//draw arc
canvasClock.prototype.drawArc=function(options){
  options.canvas.beginPath();
    options.canvas.arc(options.centerX,options.centerY,options.radius,options.angleStart,options.angleEnd,options.antiLockwise);
  if(options.sector){options.canvas.lineTo(options.centerX,options.centerY);}
  if(options.fill){options.canvas.fill();}
  if(options.stroke){options.canvas.stroke();}
    options.canvas.closePath();
}
//merge two object options
canvasClock.prototype.extend=function(target,object){
  for(var key in object){
    target[key]=object[key];
  }
  return target;
}

使用方法：

var clock2=new canvasClock();
clock2.init();

演示示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body{ margin:0px; padding:0px; font-family:Verdana, Arial, Helvetica, sans-serif;}
ul{ list-style:none; margin:0px; padding:0px;}
li{ margin:0px; padding:5px; float:left;}
</style>
<title>Javascript_Canvas_Clock</title>
</head>

<body>
<script type="text/javascript" src="canvasClock.js"></script>
<script type="text/javascript">
var ul=document.createElement('ul');
var li=[];
for(var i=0;i<3;i++){
   li.push(document.createElement('li'));
   ul.appendChild(li[i]);
}
document.body.appendChild(ul);

var clock1=new canvasClock({parent:li[0],fontColor:'#ff0000'});
clock1.init();

var clock2=new canvasClock({clockBgType:0,parent:li[1]});
clock2.init();

var clock3=new canvasClock({size:200,clockBgType:2,parent:li[2],reFreshInterval:100});
clock3.init();
</script>
</body>
</html>