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

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. poj 1681 Painter&#39;s Problem(高斯消元)
			
    id=1681">http://poj.org/problem? id=1681 求最少经过的步数使得输入的矩阵全变为y. 思路:高斯消元求出自由变元.然后枚举自由变元,求出最优值.  ...
    
			
    2. 
						
  2. POJ 1887 Testingthe CATCHER (LIS:最长下降子序列)
			
    POJ 1887Testingthe CATCHER (LIS:最长下降子序列) http://poj.org/problem?id=3903 题意: 给你一个长度为n (n<=200000)  ...
    
			
    3. 
						
  3. 异常：error 0152: No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'
			
    error 0152: No Entity Framework provider found for the ADO.NET provider with invariant name 'System. ...
    
			
    4. 
						
  4. Linux下java/bin目录下的命令集合
			
    Linux下JAVA命令(1.7.0_79) 命令 详解 参数列表 示例 重要程度 资料 appletviewer Java applet 浏览器.appletviewer 命令可在脱离万维网浏览器环 ...
    
			
    5. 
						
  5. 【2017 Multi-University Training Contest - Team 1 1001】Add More Zero
			
    [Link]: [Description] 让你求最大的k; 使得 10^k<=2^m-1 [Solution] 求出2^m-1的位数就好; [lg(2^m-1)] = lg(2^m) = m* ...
    
			
    6. 
						
  6. GCJ1C09C - Bribe the Prisoners
			
    GCJ1C09C - Bribe the Prisoners Problem In a kingdom there are prison cells (numbered 1 to P) built t ...
    
			
    7. 
						
  7. new方法的实现原理
			
    // // main.m // 04-new方法的实现原理 #import <Foundation/Foundation.h> #import "Person.h" # ...
    
			
    8. 
						
  8. Dynamics CRM2016  升级老版本号报“JavaScript Web 资源包括对 Microsoft Dynamics CRM 4.0 (2007) Web 服务终结点的引用”问题的解决的方法
			
    今天在新的server上部署了CRM2016 on-premises,并将CRM2015的数据库拷贝过来准备附加后升级,但在升级过程中遇到了例如以下错误.向导检測到了我的JavaScript Web  ...
    
			
    9. 
						
  9. [DLX反复覆盖] hdu 2828 Lamp
			
    题意: 有N个灯M个开关 每一个灯的ON和OFF状态都能控制一个灯是否亮 给出N行,代表对于每一个灯 哪些开关的哪个状态能够使得第i个灯亮 思路: 这里须要注意一个问题 假设开关1的ON 状态和开关2 ...
    
			
    10. 
						
  10. RvmTranslator6.1 - Attribute List
			
    RvmTranslator6.1 - Attribute List eryar@163.com 1. Introduction RvmTranslator can translate the RVM  ...
    
			
    11.