<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    canvas{

        background: #eee;

    }

</style>

<script>

    window.onload=function(){

        var con=document.getElementById('con');

        var oCanvas=con.getContext("2d");

        var startX=200;

        var startY=200;

        var radius=100;

        setInterval(function(){

            oCanvas.clearRect(0, 0, 400, 400);

            // 阴影

            oCanvas.shadowColor="#888";

            oCanvas.shadowOffsetX=1;

            oCanvas.shadowOffsetY=1;

            oCanvas.shadowBlur=3;

            // 渐变

            var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100);

            grd.addColorStop(0, '#efefef');

            grd.addColorStop(1, "#cecece");

            oCanvas.fillStyle=grd;

            oCanvas.lineWidth=5;

            oCanvas.beginPath();

            oCanvas.strokeStyle="#a34";

            oCanvas.arc(startX, startY, radius, 0, 2*Math.PI);

            oCanvas.stroke();

            oCanvas.fill();

            // 去掉阴影

            oCanvas.shadowColor="#888";

            oCanvas.shadowOffsetX=0;

            oCanvas.shadowOffsetY=0;

            oCanvas.shadowBlur=0;

            // 画刻度

            dragMark();

            var myDate=new Date();

            var H=myDate.getHours()*30+myDate.getMinutes()/2-90;

            var M=myDate.getMinutes()*6-90;

            var S=myDate.getSeconds()*6-90;

            // 时针

            dragT("#000",4,55,H);

            // 分针

            dragT("#888",3,65,M);

            // 秒针

            dragT("#f10",2,80,S);

            // 画中心点

            oCanvas.beginPath();

            oCanvas.fillStyle="#ccc";

            oCanvas.arc(200, 200, 6, 0, 2*Math.PI);

            oCanvas.fill();

        }, 1000);

        function dragT(color,lw,radius,angle){

            oCanvas.beginPath();

            oCanvas.strokeStyle=color;

            oCanvas.lineWidth=lw;

            oCanvas.moveTo(startX, startY);

            oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180));

            oCanvas.stroke();

        }

        function dragMark(){

            for(var i = 0; i < 60; i++) {

                var lw=2;

                var radius1=radius-5;

                var angle=i*6*Math.PI/180;

                oCanvas.strokeStyle="#888";

                if (i%5==0) {

                    radius1=radius-8;

                    lw=3;

                    oCanvas.strokeStyle="#666";

                };

                // if(i%15==0){

                //     var s=(i*6-90)*Math.PI/180;

                //     oCanvas.fillStyle="#000"

                //     oCanvas.fillText(i/5, startX+(radius-15)*Math.cos(s), startY+(radius-15)*Math.sin(s));

                // }

                oCanvas.lineWidth=lw;

                oCanvas.beginPath();

                oCanvas.moveTo(startX+radius*Math.cos(angle), startY+radius*Math.sin(angle));

                oCanvas.lineTo(startX+radius1*Math.cos(angle), startY+radius1*Math.sin(angle));

                oCanvas.stroke();

            };

        }

    }

</script>

</head>

<body>

    <canvas width="400" height="400" id="con"></canvas>

</body>

</html>






 




效果图~


												


											
HTML5小时钟的更多相关文章
	

    
								
  1. 推荐10款超级有趣的HTML5小游戏
		
    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
    
		
    2. 
						
  2. HTML5小游戏UI美化版
		
    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
    
		
    3. 
						
  3. 使用HTML5制作时钟
		
    之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
    
		
    4. 
						
  4. 【python】实现一个python编程的小时钟！
		
    [本实验内容] 1.GUI.PyQT5介绍2.实现此次实验效果 [一 GUI.PyQt5介绍] 1.Python简介 2.GUI介绍 几个常用的Python GUI库: (1)wxPython (2) ...
    
		
    5. 
						
  5. WPF制作的小时钟
		
    原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面,  ...
    
		
    6. 
						
  6. js写个小时钟
		
    原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...
    
		
    7. 
						
  7. Python自制小时钟，并转换为exe可执行程序详解
		
    一,简介Python写完程序,要靠命令来执行太LOW,太低调了,还不华丽了. 再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了. 所以哪怕只会写一个HelloWorld,也要弄 ...
    
		
    8. 
						
  8. css3-手把手 transform 小时钟
		
    学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签 的大概样子做好,效果如图: html代码如下: <div c ...
    
		
    9. 
						
  9. Html5绘制时钟
		
    最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. poj 1904 King's Quest tarjan求二分图的所有可选最大匹配边
			
    因为是完美匹配,所以每个点都已经匹配了,那么如果要选择一条别的边,增光路的最后必定找到原来所匹配的点,加上匹配的边,那么就是一个环.所以可选边在一个强连通分量里. #include <iostr ...
    
			
    2. 
						
  2. Java基础知识强化之网络编程笔记22：Android网络通信之 Android常用OAuth登录（获取个人信息）
			
    1. 获取百度个人信息(使用Gson解析): 2. 代码案例: (1)工程一览图,如下: (2)activity_main.xml: <LinearLayout xmlns:android=&q ...
    
			
    3. 
						
  3. linux内核编程学习——草稿
			
    第一章 1.1 文件IO c标准函数与系统函数的区别 FILE文件类型是一个结构体类型,包括文件描述符(inode).位置指针(f_pos).缓冲器(buffer)(8192byte). c标准文件函 ...
    
			
    4. 
						
  4. javah 生成header file 报错 问题解决
			
    环境:Android Studio, Mac OS 目标: 用javah 为MainActivity.class 生成 jni header 文件 正确的命令是 cd <class文件的路径&g ...
    
			
    5. 
						
  5. gradle与maven项目相互转化
			
    gradle这几年发展迅猛,github越来越多的项目都开始采用gradle来构建了,但是并不是所有人都对gradle很熟悉,下面的方法可以把gradle转成maven项目,前提gradle项目目录结 ...
    
			
    6. 
						
  6. 电脑小白自学软件编程-.Net语法基础之循环语句，纯技巧干货
			
    写代码也要读书,爱全栈,更爱生活.每日更新原创IT编程技术及日常实用视频. 我们的目标是:玩得转服务器Web开发,搞得懂移动端,电脑客户端更是不在话下. 本教程是基础教程,适合任何有志于学习软件开发的 ...
    
			
    7. 
						
  7. HTML5与CSS3基础教程第八版学习笔记1~6章
			
    第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
    
			
    8. 
						
  8. asp.net_MVC_jq三级联动
			
    数据库结构 建立三张表,Association,Team,Player 关系如下: 建立asp.net MVC 3项目,在HomeController.cs中利用Linq to SQL获取数据 首先实 ...
    
			
    9. 
						
  9. 数据库笔试题（经典select语句的用法）【转载】
			
    原文地址:数据库笔试题(经典select语句的用法)作者:lily 问题描述: 为管理岗位业务培训信息,建立3个表: S (S#,SN,SD,SA) S#,SN,SD,SA 分别代表学号.学员姓名.所 ...
    
			
    10. 
						
  10. UIButton关于setFont方法过时的解决方法
			
    环境:xcode7 语言:Object-c 解决方法:更改UIButton的titleLabel属性的font值 一.新建一个Single View Application项目 二.创建一个UIBut ...
    
			
    11.