<!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 时钟的更多相关文章

  1. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  2. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

  6. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  7. canvas时钟效果

    话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...

  8. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  9. 简单的canvas时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. React新接触

    html5页面的开始引入: <script src="../build/react.js"></script>   <!--核心库--> < ...

  2. 005 Python的数值类型

    005 Python的数值类型 BIF    指的是内置函数,一般不作为变量命名.如 input,while,if,else,float,等等.整型:整数.(python3.0版本把整型和长整型结合在 ...

  3. JavaBean的使用

    JavaBean主要用于实现一些业务逻辑或封装一些业务对象 通常将JavaBean中的属性设置为私有的(private),但需要为其提供公共的(public)访问方法,也就是所说的getXXX()方法 ...

  4. 用Cornerstone配置SVN

    iOS 用CornerStone配置SVN,HTTP及svn简单使用说明 分类: iOS / OC2014-11-11 11:19 3149人阅读 评论(0) 收藏 举报   目录(?)[+]   转 ...

  5. 什么是xsi:type ???

    http://www.w3.org/2001/XMLSchema-instance http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.ecli ...

  6. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  7. BZOJ 1692: [Usaco2007 Dec]队列变换

    Description FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的"全美农场主大奖赛".在这场比赛中,每个参赛者都必须让他的奶牛排成一列 ...

  8. 【技术贴】解决vss中提交pdf下载打开空白乱码

    vss客户端需要安装一个Vss2005的补丁程序,而且之前上传的pdf文件重新删掉,再次上传进Vss中,再下载打卡就ok了. 补丁名称vs80-kb943847-x86-intl.exe 别人的csd ...

  9. PHP 判断从表单提交的值是否为空

    @$time = $_GET['time'];if(empty($time)) { echo "empty";} else { echo "not empty" ...

  10. http://www.cnblogs.com/xdp-gacl/p/3951952.html

    http://www.cnblogs.com/xdp-gacl/p/3951952.html http://www.cnblogs.com/kristain/articles/2409021.html