用HTML5 Canvas画的时钟

用HTML5 Canvas画的时钟

效果图

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>canvas钟表_by http://www.daimajiayuan.com</title> 
  6. <style> 
  7. #c1{ background:-webkit-radial-gradient(#ccc,#930); display:block; margin:100px auto;} 
  8. body{ background:#000;}  
  9. </style> 
  10. <script> 
  11. function Rect(x,y,w,h,r){ 
  12.     this.x=x; 
  13.     this.y=y; 
  14.     this.w=w; 
  15.     this.h=h; 
  16.     this.background='#36383a'
  17.     this.borderColor='black'
  18.     thisthis.originX=this.w/2; 
  19.     thisthis.originY=this.h/2; 
  20. Rect.prototype.draw=function(gd){ 
  21.     gd.save(); 
  22.     gd.beginPath(); 
  23.     gd.translate(this.x,this.y); 
  24.     gd.rotate(d2a(this.r)); 
  25.      
  26.     gd.fillStyle=this.background; 
  27.     gd.strokeStyle=this.borderColor; 
  28.     gd.fillRect(-this.originX,-this.originY,this.w,this.h); 
  29.     gd.strokeRect(-this.originX,-this.originY,this.w,this.h); 
  30.      
  31.     gd.closePath(); 
  32.     gd.restore(); 
  33. function d2a(n){ 
  34.     return n*Math.PI/180; 
  35. function mouseInCicle(cx,cy,cr,x,y){ 
  36.     var d=Math.sqrt(Math.pow(x-cx,2)+Math.pow(cy-y,2));  
  37.     return d<cr
  38. window.onload=function(){ 
  39.     if(!/Chrom/g.test(navigator.userAgent)){alert('您的浏览器不支持此项功能,请您下载并安装chrome'); document.write('<a href="http://www.google.cn/chrome">下载chrome浏览器</a>');} 
  40.     var oC=document.getElementById('c1'); 
  41.     var gd=oC.getContext('2d'); 
  42.     var clockX=100,clockY=100,clockR=100,timer=null
  43.     var hour=new Rect(clockX,clockY,6,50); 
  44.     var min=new Rect(clockX,clockY,4,70); 
  45.     var sec=new Rect(clockX,clockY,2,90); 
  46.     hour.background='#111315'
  47.     hour.borderColor='#111315'
  48.     hourhour.originY=hour.h; 
  49.     min.background='#111315'
  50.     min.borderColor='#111315'
  51.     minmin.originY=min.h; 
  52.     sec.background='#111315'
  53.     sec.borderColor='#111315'
  54.     secsec.originY=sec.h; 
  55.     oC.onmousedown=function(ev){ 
  56.         if(!mouseInCicle(clockX,clockY,clockR,ev.offsetX,ev.offsetY))return; 
  57.         var disX=ev.clientX-clockX; 
  58.         var disY=ev.clientY-clockY; 
  59.         document.onmousemove=function(ev){ 
  60.             var l=ev.clientX-disX; 
  61.             var t=ev.clientY-disY; 
  62.             ll=l<=105?105:l; 
  63.             tt=t<=105?105:t; 
  64.             ll=l>=690?690:l; 
  65.             tt=t>=490?490:t; 
  66.             clockX=l; 
  67.             clockY=t
  68.             tick(); 
  69.         } 
  70.         document.onmouseup=function(){ 
  71.             document.onmousemove=null
  72.             document.onmouseup=null;     
  73.         } 
  74.         return false; 
  75.     } 
  76.     function tick(){ 
  77.         gd.clearRect(0,0,oC.width,oC.height); 
  78.         gd.save() 
  79.         gd.beginPath(); 
  80.         gd.lineWidth='10'
  81.         gd.shadowOffsetX='0'
  82.         gd.shadowOffsetY='0'
  83.         gd.shadowBlur='20'
  84.         gd.shadowColor='#999999'
  85.         gd.strokeStyle='#36383a'
  86.         gd.arc(clockX,clockY,clockR,0,d2a(360)); 
  87.         gd.stroke(); 
  88.         gd.restore(); 
  89.         hour.x=clockX
  90.         hour.y=clockY
  91.         min.x=clockX
  92.         min.y=clockY
  93.         sec.x=clockX
  94.         sec.y=clockY
  95.         var oDate=new Date(); 
  96.         hour.r=oDate.getHours()*30; 
  97.         hour.draw(gd); 
  98.         min.r=oDate.getMinutes()*6; 
  99.         min.draw(gd); 
  100.         sec.r=oDate.getSeconds()*6; 
  101.         sec.draw(gd); 
  102.         gd.beginPath(); 
  103.         gd.fillStyle='#424345'
  104.         gd.arc(clockX,clockY,10,0,d2a(360)); 
  105.         gd.fill(); 
  106.          
  107.         //四个表盘针 
  108.         gd.beginPath(); 
  109.         var sTop=new Rect(clockX,clockY,3,5); 
  110.         var sBottom=new Rect(clockX,clockY,3,5); 
  111.         var sLeft=new Rect(clockX,clockY,5,3); 
  112.         var sRight=new Rect(clockX,clockY,5,3); 
  113.         sTopsTop.originY=sTop.h+90; 
  114.         sTop.draw(gd); 
  115.          
  116.         sBottom.originY=sTop.h-95; 
  117.         sBottom.draw(gd); 
  118.          
  119.         sLeft.originX=sTop.w+90; 
  120.         sLeft.draw(gd); 
  121.          
  122.         sRight.originX=sTop.w-92; 
  123.         sRight.draw(gd); 
  124.         gd.closePath(); 
  125.          
  126.         gd.font='20px 宋体'
  127.         gd.fillText('http://www.daimajiayuan.com',300,520,500); 
  128.         gd.font='50px 黑体';   
  129.         gd.fillText('拖拽的试试……',220,580,500); 
  130.     } 
  131.     timer=setInterval(tick,1000); 
  132.     tick(); 
  133.      
  134. </script> 
  135. </head> 
  136. <body> 
  137. <canvas id="c1" width="800" height="600"> 
  138.     您的浏览器不支持canvas! 
  139. </canvas> 
  140. </body> 
  141. </html> 

来自:http://www.w3cfuns.com

转载请注明:代码家园 » 用HTML5 Canvas画的时钟

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)