<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Time</title>

<script type="text/javascript">

window.onload=function(){

      clock();

      setInterval(clock,1000);///每一秒钟重新绘制一次

    };

    function clock(){

      ///得到时分秒

      var now=new Date();

      var sec=now.getSeconds(),min=now.getMinutes(),hour=now.getHours();

      hour=hour>=12?hour-12:hour;

      var c=document.getElementById("myCanvas").getContext("2d");

      c.save();

      c.clearRect(0,0,150,150);    ///初始化画布

      c.translate(75,75);

      c.scale(0.4,0.4);

      c.rotate(-Math.PI/2);

      c.strokeStyle="black";

      c.fillStyle="black";

      c.lineWidth=8;

      c.lineCap="round";

      c.save();

      c.strokeStyle="#330066";

      c.beginPath();

      for(var i=0;i<12;i++){///小时刻度

        c.rotate(Math.PI/6);

        c.moveTo(100,0);

        c.lineTo(120,0);

      }

      c.stroke();

      c.restore();

      c.save();

      c.lineWidth=5;

      c.beginPath();

      for(var i=0;i<60;i++){///分钟刻度

        if(i%5!=0){

          c.moveTo(117,0);

          c.lineTo(120,0);

        }

        c.rotate(Math.PI/30);

      }

      c.stroke();

      c.restore();

      c.save();

      c.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);///画上时针

      c.lineWidth=12;

      c.strokeStyle="black";

      c.beginPath();

      c.moveTo(-20,0);

      c.lineTo(75,0);

      c.stroke();

      c.restore();

      c.save();

      c.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);///分针

      c.strokeStyle="#29A8DE";

      c.lineWith=10;

      c.beginPath();

      c.moveTo(-28,0);

      c.lineTo(102,0);

      c.stroke();

      c.restore();

      c.save();

      c.rotate(sec*Math.PI/30);///秒针

      c.strokeStyle="#D40000";

      c.lineWidth=6;

      c.beginPath();

      c.moveTo(-30,0);

      c.lineTo(83,0);

      c.stroke();

      c.restore();

      c.save();

      ///表框

      c.lineWidth=14;

      c.strokeStyle="#325FA2";

      c.beginPath();

      c.arc(0,0,142,0,Math.PI*2,true);

      c.stroke();

      c.restore();

      c.restore();

    }

</script>

</head>

<body>

<canvas id="myCanvas" width="200" height="200" ></canvas>

</body>

</html>

HTML5小時鐘的更多相关文章

  1. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  2. [Xamarin] 用Service 來製作一個Notification的時鐘 （转帖）

    這篇利用來製作一個會出現在Notification的時鐘,來敘述一下 Service,在你製作的App被關閉時,可以透過Service繼續運行你想處理的部分,當然Service 也有其生命周期 接下來 ...

  3. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  4. 通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）

    亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...

  5. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  6. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  7. HTML5 小实例

    1.时钟: <!doctype html> <html> <head></head> <body> <canvas id=" ...

  8. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  9. HTML5小游戏之见缝插针

    今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...

随机推荐

  1. Android5.1修改以太网MAC地址（SElinux）【转】

    本文转载自:http://blog.csdn.net/LoongEmbedded/article/details/71477203 最近高通平台Android5.1项目中有个关于设置以太网MAC的需求 ...

  2. 关于追踪qemu 源码函数路径的一个方法

    这阵子一直在研究qemu 磁盘io路径的源码,发现直接看代码是意见非常低效率的事情,qemu是一个比较庞大的家伙(源码部分大概154MB,完全由C语言来完成),整个结构也都非常地复杂,所以从代码上研究 ...

  3. openwrt 设置samba服务器与pc共享文件

    1,安装samba36-server和luci-app-samba opkg install samba36-server luci-app-samba Openwrt的samba配置是先读取/etc ...

  4. springMVC访问根路径问题

    当web.xml没有配置欢迎页:如下 <welcome-file-list> <welcome-file>login.jsp</welcome-file> < ...

  5. 美化console.log的文本(转载)

    原文地址:http://www.css88.com/archives/5260 JavaScript Console 那些少人所知的特性 console.log("%c css88.com& ...

  6. Akka源码分析-Persistence Query

    Akka Persistence Query是对akka持久化的一个补充,它提供了统一的.异步的流查询接口.今天我们就来研究下这个Persistence Query. 前面我们已经分析过Akka Pe ...

  7. SQL标量函数-日期函数

    select day(createtime) from life_unite_product     --取时间字段的天值 select month(createtime) from life_uni ...

  8. Qt对象模型之二：对象树与元对象系统

    一.对象树的概念 Qt中使用对象树(object tree)来组织和管理所有的QObject类及其子类的对象.当创建一个QObject时,如果使用了其他的对象作为其父对象(parent),那么这个 Q ...

  9. [Usaco2008 Dec]Patting Heads 轻拍牛头

    Description 今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏． 贝茜让N(1≤N≤100000)头奶牛坐成一个圈．除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶牛相邻．N号 ...

  10. Oracle查看所有表空间的数据使用情况

    -- 查看所有表空间的数据使用情况 SELECT Upper(F.TABLESPACE_NAME) "表空间名", D.TOT_GROOTTE_MB "表空间大小(M)& ...