<!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. 珠宝 jewelry 省选模拟

    n种珠宝.每种各1个.有价格ci元,美度vi.  要求分别输出1元到m元 可买的最大优美度. 整数 :0<n<=10000000, 0<ci<=300,0<=vi< ...

  2. APACHE2 服务器配置 （二） 默认端口***

    如将默认的80端口修改为9000 不管怎样,只要你选择合适的端口(电信商没有封的),进行如下的设置即可: 1, 修改 /etc/apache2/ports.conf 将 NameVirtualHost ...

  3. excel+requests管理测试用例接口自动化框架

    背景: 某项目有多个接口,之前使用的unittest框架来管理测试用例,将每个接口的用例封装成一个py文件,接口有数据或者字段变动后,需要去每个py文件中找出变动的接口测试用例,维护起来不方便,为了便 ...

  4. 小程序-文章：微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  5. 计算属性computed 与methods

    你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果: <p>Reversed message: "{{ reversedMessage() }}" ...

  6. SDL2：封装媒体显示播放Csdl2

    Github https://github.com/gongluck/SDL2-study/tree/master/Csdl2 Csdl2.h #ifndef __CSDL2_H__ #define ...

  7. P3398 仓鼠找sugar 又一次血的教训

    做什么题都要注意数组的大小,不要犯下数组越界的错误(温馨(狠心)提示): 做了好多遍就是不对,原来是[20]的数组,在for下循环1——>20,神奇爆零: 链接:https://www.luog ...

  8. 276D

    贪心 想了一会觉得没什么很好的方法,看了题解 我们枚举每个二进制位,对于l,r如果这位相同就异或到答案里,否则停止,这里肯定是r比l大,也就是r这位是1而l是0,那么我们就让r这位选1,l选0,然后把 ...

  9. StretchedBillboard 实现

    参考Unity粒子系统的StretchedBillboard,在保持模型的右朝向不变的情况下,尽量朝向摄像机 转化为数学问题: 一个向量在一个面上的投影 基础的Billboard的方向应为: 从中点指 ...

  10. bzoj 4824: [Cqoi2017]老C的键盘【树形dp】

    参考:https://www.cnblogs.com/FallDream/p/bzoj4824.html 画一画就会发现关系形成了一棵二叉树(其实看到n-1就能想到 然后dp,设f[i][j]为点i在 ...