此时针是以画布的中心为圆心；

ctx.translate(width/2,width/2);

此函数是将画布的原点移到(width/2,width/2)

数字的位置我们利用了三角函数的原理

x=rcosα；

y=rsinα；

α = 2 * π * i * 30 / 360；

利用取余把12,3,6,9的样式改变

var arr = [3,4,5,6,7,8,9,10,11,12,1,2];

var x=0,

    y=0;

var rad = 0;

for (var i=0;i<arr.length;i++) {

    rad = 2*Math.PI*i*30/360;

    x=Math.cos(rad)*(r-30);

    y=Math.sin(rad)*(r-30);

    if (i%3==0) {

        ctx.font = "20px 微软雅黑"

        ctx.fillStyle = "black"

    }else{

        ctx.font = "16px 微软雅黑"

        ctx.fillStyle = "#CCCCCC"

    }

    ctx.textAlign = "center";

    ctx.textBaseline = "middle";

    ctx.fillText(arr[i],x,y);

}

然后是表盘的秒针刻度

和表盘数字大同小异。

一定要加beginPath，免得被其他函数影响，在这里不加，所有点会连在一起

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

    ctx.beginPath();

    rad = 2*Math.PI*j*6/360;

    x=Math.cos(rad)*(r-15);

    y=Math.sin(rad)*(r-15);

    ctx.lineWidth = "1";

    if (j%5==0) {

        ctx.fillStyle = "black"

    }else{

        ctx.fillStyle = "#CCCCCC"

    }

    ctx.arc(x,y,2,0,2*Math.PI,false);

    ctx.fill();

}

时针

save和restore必不可少，在这两个函数之间，改变位置不会影响到其他函数，在此段代码中特指rotate，如果没有rotate，可以不用save和restore

一定要加beginPath，免得被其他函数影响

时针和分针秒针不一样，一个30°，还有分针的移动会影响时针的位置

时针运动的原理是画好一条线，然后旋转那条线

function drawHours(h,m){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*(h*30+m/2)/360;

    ctx.rotate(rad);

    ctx.lineWidth = "8"

    ctx.strokeStyle = "black"

    ctx.lineCap = "round";

    ctx.moveTo(0,15);

    ctx.lineTo(0,-r+100);

    ctx.stroke();

    ctx.restore();

}

分针

function drawMinutes(m){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*m/60;

    ctx.rotate(rad);

    ctx.lineWidth = "6"

    ctx.strokeStyle = "black"

    ctx.lineCap = "round";

    ctx.moveTo(0,20);

    ctx.lineTo(0,-r+80);

    ctx.stroke();

    ctx.restore();

}

秒针

function drawSecond(s){

    ctx.save()

    ctx.beginPath();

    var rad = 2*Math.PI*s/60;

    ctx.rotate(rad);

    ctx.lineWidth = "5"

    ctx.strokeStyle = "red"

    ctx.moveTo(0,30);

    ctx.lineTo(0,-r+40);

    ctx.stroke();

    ctx.restore();

}

点

function drawdot(){

    ctx.beginPath();

    ctx.fillStyle = "honeydew"

    ctx.arc(0,0,4,0,2*Math.PI,false);

    ctx.fill();

}

还添加了线性渐变，

var grd = ctx.createLinearGradient(-250,-250,250,250)

var r1 = Math.floor(Math.random()*256);
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");

相当于添加一个调色容纳器

ctx.strokeStyle = grd;

然后赋值给strokestyle

下面附上整段代码：



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="" width="500" height="500"></canvas>
		<script type="text/javascript">
			var ocanvas = document.getElementsByTagName("canvas")[0];
			var ctx = ocanvas.getContext("2d");
			var width = ocanvas.width;
			var height = ocanvas.height;
			var r = width/2;
			ctx.translate(width/2,width/2);
			var grd = ctx.createLinearGradient(-250,-250,250,250)


var timer = setInterval(function(){
				ctx.clearRect(-250,-250,500,500);
				setTime();
			},1000)
			function setTime(){
				var timet = new Date();
				var h = timet.getHours();
				var m = timet.getMinutes();
				var s = timet.getSeconds();


ctx.beginPath();
				ctx.lineWidth = "10"
				ctx.arc(0,0,width/2-5,0,2*Math.PI,false);
				var r1 = Math.floor(Math.random()*256);
				var g1 = Math.floor(Math.random()*256);
				var b1 = Math.floor(Math.random()*256);
				var r2 = Math.floor(Math.random()*256);
				var g2 = Math.floor(Math.random()*256);
				var b2 = Math.floor(Math.random()*256);
				grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
				grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
				ctx.strokeStyle = grd;
				ctx.stroke();


var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
				var x=0,
					y=0;
				var rad = 0;


for (var i=0;i<arr.length;i++) {
					rad = 2*Math.PI*i*30/360;
					x=Math.cos(rad)*(r-30);
					y=Math.sin(rad)*(r-30);
					if (i%3==0) {
						ctx.font = "20px 微软雅黑"
						ctx.fillStyle = "black"
					}else{
						ctx.font = "16px 微软雅黑"
						ctx.fillStyle = "#CCCCCC"
					}
					ctx.textAlign = "center";
					ctx.textBaseline = "middle";
					ctx.fillText(arr[i],x,y);
				}


for (var j=0;j<60;j++) {
					ctx.beginPath();
					rad = 2*Math.PI*j*6/360;
					x=Math.cos(rad)*(r-15);
					y=Math.sin(rad)*(r-15);
					ctx.lineWidth = "1";
					if (j%5==0) {
						ctx.fillStyle = "black"
					}else{
						ctx.fillStyle = "#CCCCCC"
					}


ctx.arc(x,y,2,0,2*Math.PI,false);
					ctx.fill();
				}
				drawHours(h,m);
				drawMinutes(m);
				drawSecond(s);
				drawdot();
			}
			function drawHours(h,m){
				ctx.save()
				ctx.beginPath();
				var rad = 2*Math.PI*(h*30+m/2)/360;
				ctx.rotate(rad);
				ctx.lineWidth = "8"
				ctx.strokeStyle = "black"
				ctx.lineCap = "round";
				ctx.moveTo(0,15);
				ctx.lineTo(0,-r+100);
				ctx.stroke();
				ctx.restore();
			}
			function drawMinutes(m){
				ctx.save()
				ctx.beginPath();
				var rad = 2*Math.PI*m/60;
				ctx.rotate(rad);
				ctx.lineWidth = "6"
				ctx.strokeStyle = "black"
				ctx.lineCap = "round";
				ctx.moveTo(0,20);
				ctx.lineTo(0,-r+80);
				ctx.stroke();
				ctx.restore();
			}
			function drawSecond(s){
				ctx.save()
				ctx.beginPath();
				var rad = 2*Math.PI*s/60;
				ctx.rotate(rad);
				ctx.lineWidth = "5"
				ctx.strokeStyle = "red"
				ctx.moveTo(0,30);
				ctx.lineTo(0,-r+40);
				ctx.stroke();
				ctx.restore();
			}
			function drawdot(){
				ctx.beginPath();
				ctx.fillStyle = "honeydew"
				ctx.arc(0,0,4,0,2*Math.PI,false);
				ctx.fill();
			}
		</script>
	</body>
</html>




效果如下：


												


											
canvas：动态时钟的更多相关文章
	

    
						
  1. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
		
    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
    
		
    2. 
						
  2. canvas ：原生javascript编写动态时钟
		
    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
    
		
    3. 
						
  3. [JS,Canvas]日历时钟
		
    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
    
		
    4. 
						
  4. linux动态时钟探索
		
    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...
    
		
    5. 
						
  5. 使用canvas绘制时钟
		
    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
    
		
    6. 
						
  6. HTML5 之Canvas 绘制时钟 Demo
		
    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
    
		
    7. 
						
  7. js 动态时钟
		
    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
    
		
    8. 
						
  8. 使用Timer类的两个实例 动态时钟
		
    package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...
    
		
    9. 
						
  9. canvas画时钟
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
    
		
    10. 
						
  10. [ZZ+CH] Html5 canvas+js 时钟
		
    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. shu_1171 十-&gt;二进制转换（输入输出控制）
			
    cid=1079&pid=19">http://202.121.199.212/JudgeOnline/problem.php?cid=1079&pid=19 分析:主 ...
    
			
    2. 
						
  2. poj--2007--Scrambled Polygon(数学几何基础)
			
    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Su ...
    
			
    3. 
						
  3. 生成不重复的随机数对（C/C++）
			
    1 #include <stdio.h> #include <algorithm> #include <stdlib.h> #include <time.h& ...
    
			
    4. 
						
  4. 洛谷P2633 Count on a tree
			
    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...
    
			
    5. 
						
  5. excel2007去掉方括号及里面的
			
    获取括号外面的 b2=LEFT(A1,FIND("[",A1)-1) 获取括号里面的 =MID(A2,FIND("(",A2)+1,(FIND(")& ...
    
			
    6. 
						
  6. 通过域 组策略禁用U盘（只允许部份许可U盘可在客户端读取）
			
    U盘禁用设置步骤: 1.客户端 注册表修改,USBStor  的start改为4 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\UsbSto ...
    
			
    7. 
						
  7. Flex3中addEventListener()方法使用详解
			
    Flex控件对象.RemoteObject等都有一个共同的方法addEventListener. 方法详细信息: 来源于:flash.events.EventDispatcher类 addEventL ...
    
			
    8. 
						
  8. python  pdb小结
			
    Debug功能对于developer是非常重要的,python提供了相应的模块pdb让你可以在用文本编辑器写脚本的情况下进行debug. pdb是python debugger的简称.常用的一些命令如 ...
    
			
    9. 
						
  9. 2D上下文
			
    js中说明的上下文表示的意思为C++中作用域(个人理解),因此2D上下文说明的是这个2D的作用域 像素:用来描述图片清晰度的小矩阵 填充和描边 填充:context.fillStyle = " ...
    
			
    10. 
						
  10. BZOJ1194: [HNOI2006]潘多拉的盒子(tarjan)
			
    Description 传说中,有个神奇的潘多拉宝盒.如果谁能打开,便可以拥有幸福.财富.爱情.可是直到真的打开,才发现与之 相随的还有灾难.不幸.其实,在潘多拉制造这个宝盒的时候,设置了一些咒语来封 ...
    
			
    11.