<!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. Apache POI组件操作Excel，制作报表（四）

    Apache POI组件操作Excel,制作报表(四) 博客分类: 探索实践 ExcelApacheSpringMVCServlet      上一篇我们介绍了如何制作复杂报表的分析和设计,本篇结合S ...

  2. POJ3468：A Simple Problem with Integers （线段树||树状数组||Splay解决基本问题的效率对比）

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...

  3. [Usaco2009 MAR] Earthquake Damage 2

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1585 [算法] 一个最小割的经典模型 , 详见代码 时间复杂度 : O(dinic( ...

  4. sqlite支持linq

    A small library to easily access SQLite databases from .NET/Mono/MonoTouch applications In order to ...

  5. markdown（语法）入门学习：

    原文链接:https://segmentfault.com/a/1190000010223222#articleHeader9 1.标题 注:#后面保持空格 # h1 ## h2 ### h3 ### ...

  6. 深入浅出索引--Mysql45讲笔记记录 打卡day3

    看了极客时间的mysql45讲记录一下自己理解的关于索引部分 为什么会有索引呢? 答:索引就像书的目录一样,可以让你快速知道你要看的部分在多少页.换句话说,索引就是为了提高数据库的查询效率. 索引的数 ...

  7. SpringMVC之HttpMessageConverter

    http://blog.csdn.net/zmx729618/article/details/53034420 HttpMessageConverter接口: T read(Class<? ex ...

  8. python常用的装饰器

    一.为程序添加时间类的装饰器二.验证用户是否等陆 #.为函数添加统计时间的装饰器: import time def timeer(func): def inner(): starttime=time. ...

  9. 题解报告：hdu 2602 Bone Collector（01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Problem Description Many years ago , in Teddy’s ...

  10. Liferay门户部署至Apusic Application Server域

    Liferay默认情况下部署在Tomcat容器中,因项目原因需要将Liferay部署至金蝶Apusic Application Server应用服务器中,部署过程如下,特此记录. 1.liferay- ...