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

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. 使用Opencv2遇到error C2061: 语法错误: 标识符dest
			
    在写代码是遇到了这样一个问题,error C2061: 语法错误: 标识符"dest": 1>d:\opencv\opencv\build\include\opencv2\f ...
    
			
    2. 
						
  2. 【图像配准】基于互信息的图像配准算法：MI、EMI、ECC算法
			
    简单介绍: 基于互信息的图像配准算法以其较高的配准精度和广泛的适用性而成为图像配准领域研究的热点之中的一个.而基于互信息的医学图像配准方法被觉得是最好的配准方法之中的一个.基于此.本文将介绍简单的基于 ...
    
			
    3. 
						
  3. thinkphp5项目--企业单车网站（二）
			
    thinkphp5项目--企业单车网站(二) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...
    
			
    4. 
						
  4. Armbian hostname and WiFi configuration
			
    In previous post i have described installation of Armbian on Orange Pi PC Plus. Now is the time for  ...
    
			
    5. 
						
  5. commons-fileupload 多文件上传
			
    第三方的文件上传工具类,例如这个东东:http://www.oschina.net/p/commons-fileupload,解析的方法无非就是这样: 1:在 controller 中先 HttpSe ...
    
			
    6. 
						
  6. 快速select算法的实现
			
    代码来自: http://blog.csdn.net/v_JULY_v 算法思想: // Quick_select.cpp : 定义控制台应用程序的入口点. // #include "std ...
    
			
    7. 
						
  7. 快速架设OpenStack云基础平台
			
    通常在linux下手工安装openstack比较麻烦,StackOps是一个可以快速安装的Openstack解决方案,首先我们下载StackOps的iso文件(stackops-0.5-b1312-d ...
    
			
    8. 
						
  8. Python(九)   Python的高级语法与用法
			
    本章节我们揭开Python进阶部分的高级特性,详细讲解枚举.闭包,并对函数式编程做出介绍 一. 枚举其实是一个类 from enum import Enum #枚举类 class VIP(Enum): ...
    
			
    9. 
						
  9. JS — 对象的基本操作
			
    JS面向对象系列教程 — 对象的基本操作 面向对象概述  面向对象(Object Oriented)简称OO,它是一种编程思维,用于指导我们如何应对各种复杂的开发场景. 这里说的对象(Object) ...
    
			
    10. 
						
  10. ios中静态库的创建和使用、制作通用静态库(Cocoa Touch Static Library)
			
    创建静态库可能出于以下几个理由: 1.你想将工具类代码或者第三方插件快捷的分享给其他人而无需拷贝大量文件.2.你想让一些通用代码处于自己的掌控之下,以便于修复和升级.3.你想将库共享给其他人,但不想让 ...
    
			
    11.