HTML5 Canvas绘制实时时钟

浏览数：23 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>try to draw the colock</title>
 <script src="js/modernizr-1.7.js"></script>
 <script type="text/javascript">
  window.addEventListener("load",eventWindowLoaded,false);
  function eventWindowLoaded(){
    canvasApp();
  }
  function canvasSupport()   //检测浏览器是否支持canvas属性
  {
  	return Modernizr.canvas;
  }

  function canvasApp(){
  	if(!canvasSupport()){
  		return;
  	}else{
  		var theCanvas=document.getElementById("canvas");  
  		var context=theCanvas.getContext('2d');  //获取2d上下文
  	}
   var clockRadius=50;     //时钟原型半径
   var clockImage=new Image();
   clockImage.addEventListener("load",eventCfaceLoaded,false);   //添加事件
   clockImage.src="images/cface.png";          
   function eventCfaceLoaded(){
   	startUp();
   }

   function startUp(){
    setInterval(drawScreen,1000);   //设置一个定时器，进行画布的不断重绘
   }

  function clear() { // clear canvas function
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);   //清除画布内容
  }
   function drawScreen()
   {
    clear();

    var date=new Date();
    var hours=date.getHours();
    var minutes=date.getMinutes();
    var seconds=date.getSeconds();
    hours=hours>12?hours-12:hours;
    var hour=hours+minutes/60;
    var minute=minutes+minutes/60;

    context.save();    //保存画布内容

    context.drawImage(clockImage,0,0,100,100);
    context.translate(theCanvas.width/2,theCanvas.height/2);
    context.beginPath();   //开始绘制

    //draw number
    context.fillStyle="#000";
    context.font="10px Arial";
    context.textAlign="center";
    context.textBaseline="middle";

    for(var n=1;n<=12;n++){
      var theta=(n-3)*(Math.PI*2)/12;  //绘制1-12数字的位置，自己结合坐标轴想想就知道为什么是n-3了
      var x=clockRadius*0.7*Math.cos(theta);
      var y=clockRadius*0.7*Math.sin(theta);
      context.fillText(n,x,y);  //绘制数字

    }
    context.save();  //保存画布内容

    var theta=(hour-3)*2*Math.PI/12;
     context.rotate(theta);
     context.beginPath();
     context.moveTo(-10,-3);
     context.lineTo(-10,3);
     context.lineTo(clockRadius*0.5,1);
     context.lineTo(clockRadius*0.5,-1);
     context.fill();
     context.restore();

     context.save();

     var theta=(minute-15)*Math.PI*2/60;
     context.rotate(theta);

     context.beginPath();
     context.moveTo(-10,-2);
     context.lineTo(-10,2);
     context.lineTo(clockRadius*0.7,1);
     context.lineTo(clockRadius*0.7,-1);
     context.fill();
     context.restore();

    context.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    context.rotate(theta);
    context.beginPath();
    context.moveTo(-10, -2);
    context.lineTo(-10, 2);
    context.lineTo(clockRadius * 0.8, 1);
    context.lineTo(clockRadius * 0.8, -1);
    context.fillStyle = '#0f0';
    context.fill();
    context.restore();

    context.restore();

   }
}

 </script>
 <style type="text/css">
 body{margin: 0px;padding: 0px;background-color: #eee;font-size: 4px Arial,sans-serif;}
 .clocks{height: 100px;width: 100px;margin: 25px auto;}
 </style>
</head>
<body>
	<div class="clocks" style="position:absolute;top:50px;left:50px;">
		<canvas id="canvas" width="100" height="100" >
			your broswer is not support HTML5!
		</canvas>
	</div>
</body>
</html>