<!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. 解决修改SQL SERVER 默认1433端口 访问出错的问题；

    1. 如何修改 数据库默认的 1433端口: SQL SERVER 配置管理器中 SQLSERVER 网络配置 xxx数据实例的协议中的  TCP/IP 中 默认端口 都修改为 自己定义的端口 例如 ...

  2. 【转】PL/SQL Developer使用技巧、快捷键

    原文链接:PL/SQL Developer使用技巧.快捷键 1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plu ...

  3. 再看JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div i ...

  4. python 数据字典应用

    一.什么是字典? 字典是Python语言中唯一的映射类型. 映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的哈希表. 字典对象是可变的,它是一个容器 ...

  5. lucene 实现word，pdf全文检索源码

    创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...

  6. 将页面中指定表格的数据导入到Excel中

    function AutoExcel(){   var oXL = new ActiveXObject("Excel.Application"); //创建应该对象   var o ...

  7. myeclipse启动项目时报：An internal error occurred during: "Launching TestSpring on Tomcat 7.x". java.lang.NullPointerException 解决方法

    如果出现了上述的错误按照如下的3个步骤解决: 1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runti ...

  8. 炼狱—Bug集中营

    关联性 Bug1:在web.config配置了一个配置项,但是却没有在app.config(测试工程)中进行配置: CresteOrder的加密参数为了符合QQ要求增加了一个sessionKey,但是 ...

  9. Android源码中的FLAG为何使用16进制

    1.在阅读源码的时候经常发现有一些标志属性使用一些位操作来判断是否具有该标志,增加标志或者去除标志. 比如View.java中的 /** * This view does not want keyst ...

  10. 【BZOJ 2154】Crash的数字表格 （莫比乌斯+分块）

    2154: Crash的数字表格 Description 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能 ...