天天看點
傳回

用HTML5 Canvas畫的時鐘 用HTML5 Canvas畫的時鐘

用HTML5 Canvas畫的時鐘

用HTML5 Canvas畫的時鐘 用HTML5 Canvas畫的時鐘

效果圖

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

來自：http://www.w3cfuns.com

精通HTML5 web前端 html5 canvas 時鐘
上一篇: 計算機圖形學實驗（三）——中點畫圓算法實作及其源碼
下一篇: Html5精美時鐘（Canvas實作）

繼續閱讀