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

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. json数据转化成实体 存到数据库.
			
    直接看步骤吧 1.一般我们会调用别人给的webservice获取一个字符串数据.如果为String data="xxxxxxxxxx";  这个data事实上就是样例Enterpr ...
    
			
    2. 
						
  2. POJ 3263 差分+set判重
			
    题意: 思路: 对于每一个区间 [a,b] [a+1,b-1]肯定是比a,b低至少1的 因为题目要求最大值 所以就直接差分一下 搞之 (复杂度 O(n)) Discuss里说有重复的数据 用set判一 ...
    
			
    3. 
						
  3. 如何搭建Eclipse +Apache Tomcat配置Java开发环境
			
    Linux平台下如何搭建Eclipse +Apache Tomcat配置的Java开发环境 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang ...
    
			
    4. 
						
  4. Android使用token维持登陆状态的方法
			
    什么是token token(令牌)是一串唯一的字符串,通常由服务端生成,在注册完成时返回给客户端,用来标识此用户,客户端将此字符串存储在本地.在以后的网络请求时,客户端先查询本地的token,如果有 ...
    
			
    5. 
						
  5. &lt;LeetCode OJ&gt; 20. Valid Parentheses
			
    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
    
			
    6. 
						
  6. CF   439C（251C题）Devu and Partitioning of the Array
			
    Devu and Partitioning of the Array time limit per test 1 second memory limit per test 256 megabytes  ...
    
			
    7. 
						
  7. js--11对象的创建方式
			
    <html> <head> <title>Object</title> </head> <body> <script ty ...
    
			
    8. 
						
  8. vim基础学习之自动补全功能
			
    本章我们学习自动补全功能1.自动补全优先从当前的编辑区获得补全列表例如:我们写下如下内容 aaaaa aabbb aaab 当我们再次输入aa,然后我们按下Tab的时候,会弹出一个包含 aaaaa a ...
    
			
    9. 
						
  9. Handle-postDelayed 延迟操作
			
    今天在工作的时候,遇到了一个方法,是关于Handle来实现延时操作的,自己写了一个小demo,学习总结如下 xml <?xml version="1.0" encoding= ...
    
			
    10. 
						
  10. C#变量的作用域
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
    
			
    11.