<!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. BZOJ_3209_花神的数论题_组合数+数位DP

    BZOJ_3209_花神的数论题_组合数+数位DP Description 背景 众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦. 描述 话说花神这天又 ...

  2. bzoj2038 小Z的袜子(hose)——莫队算法

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2038 就是莫队算法: 先写了个分块,惨WA: #include<iostream> ...

  3. 杂项-Java-百科：jar

    ylbtech-杂项-Java-百科:jar 在软件领域,JAR文件(Java归档,英语:Java ARchive)是一种软件包文件格式,通常用于聚合大量的Java类文件.相关的元数据和资源(文本.图 ...

  4. JSP 注释的详解及简单实例

    转自:https://www.jb51.net/article/124727.htm JSP 注释的详解及简单实例 一 三种格式 二 举例 ? 1 2 3 4 5 6 7 8 9 10 11 12 1 ...

  5. win10下的jdk1.8安装

    1 下载jdk 下一步就好 默认C盘最好 不要又中文  http://pan.baidu.com/s/1eSwvFA6(这里面有两个jdk 32位 64位) 看图 CLASSPATH: .;%JAVA ...

  6. MongoDB安全事件的防范与反思

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 近段时间来,全球范围内数以万计的MongoDB实例被攻击,作为旨在为用户提供最优MongoDB云服务的网易蜂 ...

  7. 洛谷 P3356 火星探险问题 【最大费用最大流】

    输出方案好麻烦啊 拆点,石头的连(i,i',1,1)(i,i',inf,0)表示可以取一次价值1,空地直接连(i,i',inf,0),对于能走到的两个格子(不包括障碍),连接(i',j,inf,0), ...

  8. Luogu P1004/P1006 方格取数/传纸条 【棋盘Dp】 By cellur925

    我明明记得写过这篇啊qwq为什么会搞丢 两题几乎一样. 如果再拓展到k条路,就要用网络流跑了,本蒟现在还不会. 我们容易想到四维dp,但是有一种更好的方法. 首先,先从左上到右下.再从右下到左上可以近 ...

  9. Django 源码安装及使用

    首先我们使用的是最新版的CentOS系统:CentOS 7.4 在安装django之前,我们首先保证系统中已经安装好setuptools Django安装: 1.首先我们在Django官网下载最新版本 ...

  10. VECTOR中pair的排序

    vector中pair的排序方法 首先定义一个vector vector<pair<int,char> >vec; 调用排序函数sort sort(vec.begin(),ve ...