<!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. chmod 命令 set uid ,set gid,sticky bit 说明

    permission的符号模式表: 模式 名字 说明 r 读 设置为可读权限 w 写 设置为可写权限 x 执行权限 设置为可执行权限 X 特殊执行权限 只有当文件为目录文件,或者其他类型的用户有可执行 ...

  2. JVM 找出最耗 cpu的线程 并打印线程栈

    监控JVM中最占cpu的线程 top -Hp pid JVM中最占cpu的线程ID -o THREAD,tid,time | awk 'BEGIN {count=0; } { if($2>0.3 ...

  3. .h头文件、 .lib库文件、 .dll动态链接库文件之间的关系

    转自.h头文件. .lib库文件. .dll动态链接库文件之间的关系 h头文件作用:声明函数接口 dll动态链接库作用:含有函数的可执行代码 lib库有两种: (1)静态链接库(Static Liba ...

  4. Python还是很重要的，不能丢。学习IF和WHILE

    number = 23 guess = int(input('Enter an interger : ')) if guess == number: print('Congratulations, y ...

  5. 可爱的PYTHON，更新到0.5版本代码

    这书看得挺顺的. 按着思路学习软件开发的主流思想.. cdctools.py # _*_ coding: utf-8 _*_ import os,sys def cdWalker(CDROM, cdc ...

  6. 【GDOI 2011 DAY2 T3】零什么的最讨厌了 （快速求阶乘、中国剩余定理）

    问题描述: 林记在做数学习题的时候,经常遇到这种情况:苦思冥想了很久终于把问题解出来,结果发现答案是0,久而久之林记在得到习题答案是0的时候就没有了做出一道难题的成就感.于是林记决定:以后出题,答案一 ...

  7. poj crane

    #include<stdio.h> #include<math.h> #include<string.h> #include<stdlib.h> #de ...

  8. Jrtplib

    RTP/RTCP 视频数据传输 (续) http://blog.csdn.net/neohuo/article/details/821442

  9. [转贴] 从零开始学C++之异常（二）：程序错误、异常（语法、抛出、捕获、传播）、栈展开

    一.程序错误 编译错误,即语法错误.程序就无法被生成运行代码. 运行时错误 不可预料的逻辑错误 可以预料的运行异常 例如: 动态分配空间时可能不会成功 打开文件可能会失败 除法运算时分母可能为0 整数 ...

  10. 深入浅出 - Android系统移植与平台开发（十一）- Android系统的定制（瘋耔修改篇一）

    首先非常感谢原文作者为我们提供的知识库,因为有你们的贡献,我们的开发难度更显简单 原文 :   http://blog.csdn.net/mr_raptor/article/details/30113 ...