<!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. The type exists in both DLLs

    2>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\c0b37647\aaceda91\Ap ...

  2. YTU 2412: 帮警长数一数【循环、分支简单综合】

    2412: 帮警长数一数[循环.分支简单综合] 时间限制: 1 Sec  内存限制: 64 MB 提交: 323  解决: 169 题目描述 黑猫警长在犯罪现场发现了一些血迹,现已经委托检验机构确定了 ...

  3. 配置DTD提示的方法

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE sqlMap PUBLIC "-/ ...

  4. WinHTTrack

    看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 http://www.cnblogs.com/wolf-sun/p/3436585.html 用此工具下载别人整站的图 ...

  5. JS计算字符串实际长度

    http://www.qttc.net/201207136.html // UTF8字符集实际长度计算 function getStrLeng(str){ var realLength = 0; va ...

  6. UOJ #206. 【APIO2016】Gap【交互题】

    参考:https://blog.csdn.net/clover_hxy/article/details/70767653 人生第一次交互题...不是很难但是思维和传统题差别挺大的(以及并不会本地测试= ...

  7. hdu 1071 The area【定积分】

    用顶点式\( a(x-h)^2+k=y \)解方程,转化为\(ax^2+bx+c=y \)的形式,然后对二次函数求定积分\( \frac{ax^3}{3}+\frac{bx^2}{2}+cx+C \) ...

  8. Web Scraping with R: How to Fill Missing Value (爬虫：如何处理缺失值)

    网络上有大量的信息与数据.我们可以利用爬虫技术来获取这些巨大的数据资源. 这次用 IMDb 网站的2018年100部最欢迎的电影 来练练手,顺便总结一下 R 爬虫的方法. >> Prepa ...

  9. css覆盖select样式并添加小箭头

    .select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...

  10. spring/spring boot/spring cloud书籍推荐

    最近看了一些spring书籍,主要都是工作需要,实话说,没有必要买这么多书,每个主题一本就足够了,其他的补充可以通过项目实战和上网看官网或者博客补充. 说是推荐,其实只是一些简单读后感想而已,每本书都 ...