canvas是什么牌子|canvas实现钟表效果

【www.bbyears.com--php常用代码】

效果如下：

代码如下：

 

 <script>

 var oC=document.getElementById('canvas1');

 var oGC=oC.getContext('2d');

 function toDraw(){

 var x=200;

 var y=200;

 var r=150;

 oGC.clearRect(0,0,oC.width,oC.height);

 var oDate=new Date();

 var oHour=oDate.getHours();

 var oMinu=oDate.getMinutes();

 var oSec=oDate.getSeconds();

 var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;

 var mVal=(-90+oMinu*6)*Math.PI/180;

 var sVal=(-90+oSec*6)*Math.PI/180;

 oGC.beginPath();

 for(i=0;i<60;i++){

 oGC.moveTo(x,y);

 oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

 }

 oGC.closePath();

 oGC.stroke();

 oGC.fillStyle='#fff';

 oGC.beginPath();

 oGC.moveTo(x,y);

 oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);

 oGC.closePath();

 oGC.fill();

 oGC.lineWidth=3;

 oGC.beginPath();

 for(i=0;i<12;i++){

 oGC.moveTo(x,y);

 oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

 }

 oGC.closePath();

 oGC.stroke();

 oGC.fillStyle='#fff';

 oGC.beginPath();

 oGC.moveTo(x,y);

 oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);

 oGC.closePath();

 oGC.fill();

 oGC.lineWidth=5;

 oGC.beginPath();

 oGC.moveTo(x,y);

 oGC.arc(x,y,r*10/20,hVal,hVal,false);

 oGC.closePath();

 oGC.stroke();

 oGC.lineWidth=3;

 oGC.beginPath();

 oGC.moveTo(x,y);

 oGC.arc(x,y,r*14/20,mVal,mVal,false);

 oGC.closePath();

 oGC.stroke();

 oGC.lineWidth=1;

 oGC.beginPath();

 oGC.moveTo(x,y);

 oGC.arc(x,y,r*17/20,sVal,sVal,false);

 oGC.closePath();

 oGC.stroke();

 }

 setInterval(toDraw,1000);

 toDraw();

 </script>

本文来源：http://www.bbyears.com/jiaocheng/124408.html