<!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. 阿里云服务器CentOS 5.7(64位)安装配置LAMP服务器(Apache+PHP5+MySQL)

    一.快速安装Apache+PHP5+MySql ----------------------------------------------------- 补充:由于163的yum源上只有php5.1 ...

  2. xml之phpdom操作

    php xml编程XML解析技术介绍 1.php与DOM 2.PHP与XPath 3.SimpleXML DOM(document object model)文档对象模型 把一个文件看做一个对象模型, ...

  3. Makefile与shell脚本的区别

    引用博客:Makefile与shell脚本区别 在Makefile可以调用shell脚本,但是Makefile和shell脚本是不同的.本文试着归纳一下Makefile和shell脚本的不同. 1.s ...

  4. javascript 字符串转数字

    //把str转换为数字的方式,想起很久以前的一个面试题,说字符转数字的方式有哪些,现在想了想 var str1='4.88',str2='4.8xx'; console.log(parseInt(st ...

  5. PHP 判断是表单否有这个参数，如果没有则设置默认值

    <?php @$name = $_GET["name"]; if(isset($name)) { echo "name = " .$name; } els ...

  6. 通过live555实现H264 RTSP直播

    http://blog.csdn.net/firehood_/article/details/16844397

  7. 最好的程序员都是行动派（成功者不是那些明知赚钱之法还要推三阻四的人。成功者知道轻重缓急，善于把握今天） good

    我相信,所有程序员都需要在下面两点之间找到一个良好的平衡: 1.把自己关在一间私密的办公室里,针对你的程序与编译器展开一次亲密对话. 2.出入公众场合,与其他人公开谈论你的程序. 关于这个话题,我已经 ...

  8. Nginx配置性能优化(转)

    大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了.而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...

  9. WebService调用http://www.webxml.com.cn中的一些服务示例

    1.打开http://www.webxml.com.cn网站下的“全部WebService”,会看到如下图的图片 2.点击打开WSDL连接,如下图,并保存为一个后缀名为wsdl文件,放在项目的根目录下 ...

  10. 水平/竖直居中在旧版Safari上的bug

    今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...