码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 时钟

时间:2016-11-08 19:43:03      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:script   isp   div   canvas   second   getc   text   gre   als   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        #canvas{
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300">
    </canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var cans = canvas.getContext("2d");
    var ss=[],aa=0,dd=[],ww=[];
    var today=new Date();
    var hh=today.getMinutes();
    var zz=today.getHours()%12*5
    zz=zz+Math.floor(hh/12);
    var ll=today.getSeconds();
    cans.font = "bold 14px Arial";
    cans.textAlign="center";
    cans.textBaseline="middle";
    cans.fillStyle="green";
    for(var times=0; times<60; times++) {
      var hudu = (2*Math.PI / 360) * 6 * times;
      ss[times]={};
      dd[times]={};
      ww[times]={};
        ss[times].X = 150 + Math.sin(hudu) * 85;
        ss[times].Y = 150 - Math.cos(hudu) * 85;
        dd[times].X = 150 + Math.sin(hudu) * 65;
        dd[times].Y = 150 - Math.cos(hudu) * 65;
        ww[times].X = 150 + Math.sin(hudu) * 45;
        ww[times].Y = 150 - Math.cos(hudu) * 45;
        if(times%5==0)
      {
           if(aa==0)
           aa=12;
           cans.fillText(aa,150 + Math.sin(hudu) * 93,150 - Math.cos(hudu) * 93);
           if(aa==12)
           aa=0;
           aa++;
      }   
       }
           cans.beginPath();
           cans.arc(150,150,112,0,2*Math.PI,false);
           cans.moveTo(252,150);
           cans.arc(150,150,102,0,2*Math.PI,false);
           cans.strokeStyle = red;
           cans.stroke();
    function nihao(c,s){
            cans.strokeStyle = red;
            cans.moveTo(150,150);//第一个起点
            cans.lineTo(c,s);
    }
    function hao(){
           cans.beginPath();
           cans.moveTo(150,150);
           cans.arc(150,150,86,0,2*Math.PI,false);
           cans.fillStyle = white;
           cans.fill();
    }
        (function pageLoad(){
         hao();
          ll++;
          ll=ll%60;
            cans.beginPath();
           //第二个点
           nihao(ss[ll].X,ss[ll].Y);
           if(ll%60==0){
           hh++;
           hh=hh%60;
           }
           if(hh%12==0){
           zz++;
           zz=zz%60;
           }
            nihao(dd[hh].X,dd[hh].Y);
            nihao(ww[zz].X,ww[zz].Y);
            cans.stroke();
         setTimeout(arguments.callee,1000);
        })();
</script>
</html>

 

canvas 时钟

标签:script   isp   div   canvas   second   getc   text   gre   als   

原文地址:http://www.cnblogs.com/aaronchu/p/6044095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!