<!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. Dataset

    1,if(ds == null) 这是判断内存中的数据集是否为空,说明DATASET为空,行和列都不存在!! 2,if(ds.Tables[0].Count == 0) 这应该是在内存中存在一个DAT ...

  2. 服务端生成word并压缩打包下载

    所需工具 phpwrod 库 php_zip 扩展 下载phpword库,放到类加载路径. 安装php_zip扩展 下载地址 http://pecl.php.net/package/zip linux ...

  3. Android App资源的查找过程分析

    Android资源管理框架实际就是由AssetManager和Resources两个类来实现的.其中,Resources类可以根据ID来查找资源,而AssetManager类根据文件名来查找资源.事实 ...

  4. u-boot Makefile整体解析

    一.概述   1.理解u-boot的makefile需要的准备 linux常用命令.shell脚本基础知识.makefile脚本基础知识 2.Makefile的元素 万变不离其宗,无论工程多么复杂,文 ...

  5. Ogre实现简单地形

    利用SimpleRenderable实现DirectX 9 3D 游戏设计入门中 第十三章 地形渲染基础的简单地形,只是简单的实现了地形的基本框架,顶点,索引,纹理等,为简单起见高度都为1,适合新手做 ...

  6. 【产品体验】喵街&飞凡

    最近O2O很火啊,我也来找几个O2O产品体验下~~~ 阿里今年5月30号上线了一款线下逛街App——喵街,号称消费者的逛街神器.阿里去年已经与银泰合作一年,探索互联网和传统实体零售合作之路,这次则免费 ...

  7. 如何把关联性的告警智能添加到 Nagios 上？（2）

    上节回顾 对于许多 IT 和运维团队来说,Nagios 既是一个福音也是一个诅咒.一方面,Naigos 在 IT 应用的工作领域中,给予了你可以实时查看告警数据的可能性:但是另一方面,Nagios 也 ...

  8. Java 声明和访问控制（一） 数组的声明 private可以修饰类吗

    数组的声明: int []a[] = new int[4][];//是正确的 int[] array = new int[2]{1,2};//是错误的 数组的长度是不可改变的,不能通过任何方式改变大小 ...

  9. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-003-@Conditional根据条件生成bean及处理profile

    一.用@Conditional根据条件决定是否要注入bean 1. package com.habuma.restfun; public class MagicBean { } 2. package ...

  10. Android textAppearance的属性设置及TextView属性详解

    textAppearance的属性设置 android:textAppearance="?android:attr/textAppearanceSmall" android:tex ...