1、最终效果
　　时钟、分钟、秒指针连续移动

2、完整代码
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Clock in canvas</title>

    <script type="text/javascript" charset="utf-8" src="Scripts/Jquery/jquery-1.9.1.min.js"></script>

    <script>

        $(function () {

            var container = $('.container');

            var clockPanel = $('.clockPanel', container).get(0);

            var ctx = clockPanel.getContext('2d');

            var r = 100;

            var point = { X: 150, Y: 150 };

            drawCircle(ctx, point, r);

            var clockPointer = $('.clockPointer', container).get(0);

            var ctxPointer = clockPointer.getContext('2d');

            var run = function () {

                drawPointer(ctxPointer, point, r, new Date());

                requestAnimFrame(run);

            }

            run();

        })

        function drawCircle(ctx, point, r) {

            ctx.beginPath();

            ctx.arc(point.X, point.Y, r, 0, Math.PI * 2, true);

            ctx.stroke();

            ctx.beginPath();

            ctx.arc(point.X, point.Y, 4, 0, Math.PI * 2, true);

            ctx.fillStyle = "#ccc";

            ctx.fill();

            ctx.closePath();

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

                drawScale(ctx, point, r, 5, i);

            }

        }

        function drawScale(ctx, point, r, len, scale) {

            var angle = 360 * scale / 60 * 2 * Math.PI / 360

            if (scale % 5 == 0) {

                len = len + 3

                ctx.lineWidth = 3;

            }

            else {

                ctx.lineWidth = 1;

            }

            var sX = point.X - (r - len) * Math.sin(angle);

            var sY = point.Y - (r - len) * Math.cos(angle);

            var eX = point.X - r * Math.sin(angle);

            var eY = point.Y - r * Math.cos(angle);

            ctx.beginPath();

            ctx.strokeStyle = "#ccc";

            ctx.moveTo(sX, sY);

            ctx.lineTo(eX, eY);

            ctx.stroke();

            ctx.closePath();

        }

        function drawPointer(ctx, point, r, time) {

            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

            var hours = time.getHours();

            var minutes = time.getMinutes();

            var seconds = time.getSeconds();

            var minSec = time.getMilliseconds();

            var angleS = 2 * Math.PI * (60 * 1000 - seconds * 1000 - minSec) / (60 * 1000);

            var esX = point.X - (r - 5) * Math.sin(angleS);

            var esY = point.Y - (r - 5) * Math.cos(angleS);

            var eSec = { X: esX, Y: esY };

            drawLine(ctx, point, eSec, 1);

            var angleM = 2 * Math.PI * (60 * 60 - minutes * 60 - seconds) / (60 * 60);

            var emX = point.X - (r - 10) * Math.sin(angleM);

            var emY = point.Y - (r - 10) * Math.cos(angleM);

            var eMinu = { X: emX, Y: emY };

            drawLine(ctx, point, eMinu, 2);

            var angleH = 2 * Math.PI * ((24 * 60 * 60 - hours * 60 * 60 - minutes * 60 - seconds) % (12 * 60 * 60)) / (12 * 60 * 60);

            var ehX = point.X - (r - 15) * Math.sin(angleH);

            var ehY = point.Y - (r - 15) * Math.cos(angleH);

            var eHour = { X: ehX, Y: ehY };

            drawLine(ctx, point, eHour, 3);

        }

        function drawLine(ctx, pointS, pointE, lineWidth) {

            ctx.lineWidth = lineWidth;

            ctx.beginPath();

            ctx.strokeStyle = "#808080";

            ctx.moveTo(pointS.X, pointS.Y);

            ctx.lineTo(pointE.X, pointE.Y);

            ctx.stroke();

            ctx.closePath();

        }

        window.requestAnimFrame = (function () {

            return window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

            function (run) {

                window.setTimeout(run, 16);

            };

        })();

    </script>

    <style>

        .container {

            width: 300px;

            height: 300px;

            /*background: orange;*/

            margin: 0 auto;

            position: relative;

        }

        canvas {

            position: absolute;

        }

    </style>

</head>

<body>

    <div class="container">

        <canvas class="clockPanel" height="300" width="300"></canvas>

        <canvas class="clockPointer" height="300" width="300"></canvas>

    </div>

</body>

</html>


3、实现重点




　　　　window.requestAnimFrame = (function () {

            return window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

            function (run) {

                window.setTimeout(run, 16);

            };

        })();




 
												


											
Html5画钟表盘/指针实时跳动的更多相关文章
	

    
								
  1. HTML5画：线、圆、矩形、渐变
		
    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...
    
		
    2. 
						
  2. [WPF] 使用 HandyControl 的 CirclePanel 画出表盘刻度
		
    1. 前言 最近需要一个 WPF 的表盘控件,之前 Cyril-hcj 写过一篇不错的博客 <WPF在圆上画出刻度线>,里面介绍了一些原理及详细实现的代码: double radius = ...
    
		
    3. 
						
  3. 使用HTML5画饼图
		
    在进行数据的统计分析时, 饼图也是比较经常用到的一类统计图. 需求分析:   一个饼图一般包含以下几部分:   1.标题   2.扇形   3.份额(百分比)   4.标识器      设计:     ...
    
		
    4. 
						
  4. 使用HTML5画柱状图
		
    柱状图在很多应用中都比较常见,例如投票结果的统计分析,企业销售数据的统计分析等等.    需求分析:  一个柱状图一般包含以下几部分:  1.标题  2.横坐标(含标题)  3.竖坐标 (含标题.刻度 ...
    
		
    5. 
						
  5. html5画饼形图
		
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx ...
    
		
    6. 
						
  6. 一个给力的html5 画多边形的例子
		
    只需改变参数就能画出你想要的多边形,代码简单!不得不惊叹canvas的强大! 代码奉上 <!doctype html> <html> <head> <meta ...
    
		
    7. 
						
  7. HTML5 画一张图
		
    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/33344289 一.绘制图像 使用drawImage()方法绘制图像. 画图环 ...
    
		
    8. 
						
  8. html5 画图板
		
    8个最新炫酷的HTML5动画应用 http://www.php100.com/html/it/qianduan/2015/0107/8281.html 另外一个画板demo http://www.os ...
    
		
    9. 
						
  9. html5画四边形
		
    <canvas id='test02'></canvas> <script> var canvas = document.getElementById('test0 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux - 日志文件简介
			
    Linux日志文件绝大多数存放在/var/log目录,其中一些日志文件由应用程序创建,其他的则通过syslog来创建. Linux系统日志文件通过syslog守护程序在syslog套接字/dev/lo ...
    
			
    2. 
						
  2. Data - Spark简介
			
    Spark简介 Spark是基于内存计算的大数据并行计算框架,可用于构建大型的.低延迟的数据分析应用程序. HomePage:http://spark.apache.org/ GitHub:https ...
    
			
    3. 
						
  3. Python模拟微博登陆，亲测有效
			
    今天想做一个微博爬个人页面的工具,满足一些不可告人的秘密.那么首先就要做那件必做之事!模拟登陆-- 代码是参考了:https://www.douban.com/note/201767245/ 我对代码 ...
    
			
    4. 
						
  4. Python--DBUtil
			
    Python--DBUtil包 1 简介 DBUtils是一套Python数据库连接池包,并允许对非线程安全的数据库接口进行线程安全包装.DBUtils来自Webware for Python. DB ...
    
			
    5. 
						
  5. 【xsy1303】生成树 乱搞
			
    题目大意:给你n个点,问这n个点构成的最小标准差生成树的值 这题题解里面写的都是什么代码?? 你用O(n^4)的复杂度,枚举出两条边,然后求平均数. 对于剩下的边,我们求出这些边与平均数的差,然后求最 ...
    
			
    6. 
						
  6. 网络IP地址
			
    IP地址分类 A类网络的IP地址范围为1.0.0.1-127.255.255.254: B类网络的IP地址范围为:128.1.0.1-191.255.255.254: C类网络的IP地址范围为:192 ...
    
			
    7. 
						
  7. 使用com.aspose.words将word模板转为PDF乱码解决方案（window下正常）
			
    最近在做电子签名过程中,需要将合成的电子签名的word文件(正常)转换为pdf文件时,在开发平台window下转换没有问题,中文也不会出现乱码.但是将项目部署到正式服务器(Linux)上,转换出来的p ...
    
			
    8. 
						
  8. Struts2学习（五）———— s标签和国际化
			
    一.s标签 在struts-2.3.15.1/docs/WW/docs/tag-reference.html下,就有着struts2所有标签的参考文献,只能看看其中比较常用的标签.其他的以后遇到了在看 ...
    
			
    9. 
						
  9. Linux 命令行下光标移动快捷键
			
    常用的快捷键: Ctrl + u 删除光标之前到行首的字符 Ctrl + k 删除光标之后到行尾的字符 Ctrl + a 光标移动到行首 Ctrl + e 光标移动到行尾 Ctrl + l 清屏 Al ...
    
			
    10. 
						
  10. dom操作------获取长/宽/距离等值的若干方法
			
    1.offsetLeft:获取元素边框以外至文档顶的距离:若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且 ...
    
			
    11.