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

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. Firefox访问https的网站，一直提示不安全
			
    http://mozilla.com.cn/thread-374897-1-1.html 要激活此功能步骤如下: 在地址栏键入"about:config" 点击“我了解此风险” 在 ...
    
			
    2. 
						
  2. php数组增加元素
			
    php数组增加元素 截图 代码 <HTML> <HEAD> <TITLE>给数组增加元素</TITLE> </HEAD> <? $Ci ...
    
			
    3. 
						
  3. 学习 shell —— 创建序列数组
			
    list/array 1. seq 方法创建 基本用法: $ a_num_seq = ($seq 5) $ echo $a_num_seq 1 2 3 4 5 a_num_seq 得到是字符串,不同之 ...
    
			
    4. 
						
  4. P3908 异或之和
			
    题目描述 求1 \bigoplus 2 \bigoplus\cdots\bigoplus N1⨁2⨁⋯⨁N 的值. A \bigoplus BA⨁B 即AA , BB 按位异或. 输入输出格式 输入格 ...
    
			
    5. 
						
  5. 未能将基于用户的Visual C++项目设置保存到user文件错误的解决
			
    作者:朱金灿 来源:http://blog.csdn.net/clever101 最近遇见一个诡异错误,将Win7家庭版升级到Win7旗舰版.然后使用原来安装的VS2008开发,保存工程时总是出现未能 ...
    
			
    6. 
						
  6. Linux下CD/DVD刻录软件
			
    1.Brasero是一款CD/DVD刻录软件,Gnome桌面环境默认自带,支持单次写入数据DVD和任何类型的CD,并且能够将光盘镜像写入到硬盘,其图形化的操作界面使用户能够轻松而快速的在Linux下烧 ...
    
			
    7. 
						
  7. 实现人脸识别性别之路---matplotlib
			
    Np.linspace(start,stop,num,endpoint,dtype)函数 1.参数:范围值,在范围值中取到的数值总数.是否包含范围值.类型 2.返回值:返回一维数据 3.在指定的范围内 ...
    
			
    8. 
						
  8. BZOJ3294: [Cqoi2011]放棋子（计数Dp，组合数学）
			
    题目链接 解题思路: 发现一个性质,如果考虑一个合法的方案可以将行和列都压到一起,也就是说,在占用行数和列数一定的情况下,行列互换是不会影响答案的,那么考虑使用如下方程: $f[i][j][k]$为占 ...
    
			
    9. 
						
  9. wampserver-mysql创建数据库
			
    首先打开wampserver,在右下角会出现一个这样的图标,左键单击它,选择MYSQL->MYSQL控制台 输入密码 创建一个新的数据库:create database XXX 注意要输“;”, ...
    
			
    10. 
						
  10. Jsp学习总结（1）——JSP九大内置对象和四种属性范围解读
			
    一.四种属性范围 1.1.在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效 request:在一次服务请求范围内,服务器跳转后依然有效 session:-在一次会话范围内 ...
    
			
    11.