<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

		<canvas id="c1" width="600" height="600"></canvas>

	</body>

	<script type="text/javascript">

		var oC = document.getElementById('c1');

		var oGC = oC.getContext('2d');

		function drawWatch(){

		var x = 200,y = 200,r = 100;

		//清除上次的画布 优化性能

		oGC.clearRect(0,0,oC.width,oC.height);

		//日期处理 时分秒

		var dateT=new Date();

		var hour=dateT.getHours();

		var min=dateT.getMinutes();

		var sec=dateT.getSeconds();

		//转化为弧度

		var hourValue=(hour*30-90+min/2)*Math.PI/180;

		var minValue=(min*6-90)*Math.PI/180;

		var secValue=(sec*6-90)*Math.PI/180;

		// 表盘--每6°的刻度线

		oGC.beginPath();

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

			oGC.moveTo(x, y);

			oGC.arc(x, y, r, 6 * i * Math.PI / 180,

				6 * (i + 1) * Math.PI / 180);

		};

		oGC.closePath();

		oGC.stroke();

		//覆盖 最外圈刻度线

		oGC.fillStyle = "white";

		oGC.beginPath();

		oGC.moveTo(x, y);

		oGC.arc(x, y, r*19/20, 0, 360, false);

		oGC.fill();

		oGC.closePath();

//		oGC.stroke();

		//时针刻度线

		oGC.beginPath();

		oGC.lineWidth = 3;

		for(var i = 0; i < 12; i++) {

			oGC.moveTo(x, y);

			oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);

		};

		oGC.closePath();

		oGC.stroke();

		//覆盖 时针刻度线

		oGC.beginPath();

		oGC.strokeStyle="white";//边框

		oGC.arc(x,y,r*18/20,0*Math.PI,2*Math.PI,false);

		oGC.fillStyle="white";

		oGC.fill();

		oGC.closePath();

//		oGC.stroke();

		//shi针

			oGC.lineWidth=5;

			oGC.strokeStyle="red";

			oGC.beginPath();

			oGC.moveTo(x,y);

			oGC.arc(x,y,r*0.5,hourValue,hourValue,false);

			oGC.closePath();

			oGC.stroke();

		//	fen针

			oGC.lineWidth=3;

			oGC.strokeStyle="orange";

			oGC.beginPath();

			oGC.moveTo(x,y);

			oGC.arc(x,y,r*0.7,minValue,

				minValue,false);

			oGC.closePath();

			oGC.stroke();

			//	秒针

			oGC.lineWidth=2;

			oGC.strokeStyle="black";

			oGC.beginPath();

			oGC.moveTo(x,y);

			oGC.arc(x,y,r*0.9,secValue,

				secValue,false);

			oGC.closePath();

			oGC.stroke();

		}

		drawWatch();

		setInterval(drawWatch,1000);

	</script>

</html>

　　

canvas制作表盘的更多相关文章

  1. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  2. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  3. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  4. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  5. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  6. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  7. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  8. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  9. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

随机推荐

  1. java 基础之--反射详解

    java 反射绝大部分都位于 java.lang.reflect package 中:常用的类就是: 1.class类:代表一个类 2.field类:代表类的成员变量 3.method:代表类的方法 ...

  2. 数字&字符串

    一.数字 数字分为整型(int)和浮点型(float) int(整型):整数数字 >>> a = 12 >>> a 12 >>> b = 12.3 ...

  3. ADT和DS

    Abstract Data Type vs. Data Structrue 抽象数据类型=数据模型+定义在该模型上的一组操作.  interface 数据结构=基于某种特定语言,实现ADT的一整套算法 ...

  4. ELK日志系统：Filebeat使用及Kibana如何设置登录认证（转）

    原文地址:http://www.cnblogs.com/yjmyzz/p/filebeat-turorial-and-kibana-login-setting-with-nginx.html 根据el ...

  5. public void method()，void前面的泛型T是什么

    public <T>这个T是个修饰符的功能,表示是个泛型方法,就像有static修饰的方法是个静态方法一样. 注意<T> 不是返回值,此处的返回值是void ,此处的<T ...

  6. pthreads v3在centos7下的安装与配置

    我的centos版本是7.4.1708,php的版本是7.2.4(注意要是线程安全版),如下图所示: 首先我们在如下网址下载好pthreads的源码: http://pecl.php.net/pack ...

  7. golang 创建一个简单的连接池，减少频繁的创建与关闭

    一.连接池的描述图片如下: 二.连接池代码如下: package main; import ( "time" "sync" "errors" ...

  8. 如何指定vim 的查找是从上往下还是从下往上[z]

    vim 搜索可以是 / 或者 ?,前者是往下找,后者是往前找. 用 n 查找下一个的时候,就和这两个指令指定的方向相同.如果你想改变方向的话,比如想往下找,那么 / 完了直接回车就行了.表示再次使用上 ...

  9. Jmeter常用脚本开发之Beanshell Sampler

    Beanshell Sampler Beanshell介绍:是一种完全符合java语法规范的脚本语言,且又拥有自己的一些语法和方法:是一种松散类型的脚本语言:它执行标准java语句和表达式,另外它还包 ...

  10. c#networkcomms protobuf-net 文件加载出现问题

    服务器端里添加客户管理添加了些功能, 客户端私活连不上了,老程序没问题, 在服务器端程序里边也接受不到事件,客户端就提示链接中断了, 在客户端里边查了 链接中断是客户端上做的,当传回的包为0 事,程序 ...