深夜，用canvas画一个时钟

查看demo

这几天准备阿里巴巴的笔试，可以说已经是心力交瘁，自从阿里和蘑菇街的内推被刷掉之后，开始越来越怀疑起自己的能力来，虽然这点打击应该是微不足道的。毕竟校招在刚刚开始拉开帷幕，精彩的还在后头，内推不过，还有机会去秋招，这次秋招不过，还有明年的春招。但是明年的春招我可能等不起了，我迫不及待地需要一份工作，需要一份我向往的工作。

今天看书看到canvas部分，便用它来写了一个时钟，原理很简单,用context.arc(100, 100, 99, 0, Math.PI*2, false);绘制圆形作为表盘，context.fillText(i, textX, textY);绘制表盘上的数字，context.lineTo(secondsX, secondsY);绘制秒针，时针和分针的原理与此相同。接着就是正弦和余弦函数的运用。

开代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>canvas时钟</title>

</head>

<body>

	<canvas id="drawing" width="400" height="400"></canvas>

	<script>

		var draw = document.getElementById('drawing');

		var time = null;

		var seconds = 0;

		var minutes = 0;

		var hours = 0;

		var secondsAngle = 0;

		var minutesAngle = 0;

		var hoursAngle = 0;

		var secondsX = 0;

		var secondsY = 0;

		var minutesX = 0;

		var minutesY = 0;

		var hoursX = 0;

		var hoursY = 0;

		if (draw.getContext) {

			var context = draw.getContext('2d');

			// 绘制外圆

			context.arc(100, 100, 99, 0, Math.PI*2, false);

			// 绘制内圆

			context.moveTo(194, 100);

			context.arc(100, 100, 94, 0, Math.PI*2, false);

			context.stroke();

			context.font = "bold 14px Arial";

			context.textAlign = 'center';

			context.textBaseline = 'middle';

			// context.fillText('12', 100, 20);

			var i = 1;

			var textAngle = 0;

			var textX = 0;

			var textY = 0;

			for (i = 1; i < 13; i++) {

				textAngle = i * (Math.PI*2/12);

				textY = 100 - 83*Math.cos(textAngle);

				textX = 100 + 83*Math.sin(textAngle);

				context.fillText(i, textX, textY);

			}

			drawClock();

			setInterval(drawClock, 1000);

		}

		function getTime() {

			var date = new Date();

			var res = {};

			res.seconds = date.getSeconds();

			res.minutes = date.getMinutes();

			res.hours = date.getHours();

			return res;

		}

		function drawClock() {

			// 开始路径

			context.beginPath();

			context.clearRect(35, 35, 130, 130);

			time = getTime();

			seconds = time.seconds;

			minutes = time.minutes;

			hours = time.hours > 12 ? time.hours-12: time.hours;

			// 绘制秒针

			// context.rePaint();

			context.moveTo(100, 100);

			secondsAngle = (seconds/60)*Math.PI*2;

			secondsY = 100 - 65*Math.cos(secondsAngle);

			secondsX = 100 + 65*Math.sin(secondsAngle);

			context.lineTo(secondsX, secondsY);

			// 绘制分针

			context.moveTo(100, 100);

			minutesAngle = ((minutes*60+seconds)/(60*60))*Math.PI*2;

			minutesY = 100 - 50*Math.cos(minutesAngle);

			minutesX = 100 + 50*Math.sin(minutesAngle);

			context.lineTo(minutesX, minutesY);

			// 绘制时针

			context.moveTo(100, 100);

			hoursAngle = ((hours*60*60+minutes*60+seconds)/(12*60*60))*Math.PI*2;

			hoursY = 100 - 35*Math.cos(hoursAngle);

			hoursX = 100 + 35*Math.sin(hoursAngle);

			context.lineTo(hoursX, hoursY);

			// 描边路径

			context.stroke();

		}

	</script>

</body>

</html>

深夜，用canvas画一个时钟的更多相关文章

  1. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  2. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 用canvas画一个时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  8. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  9. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

随机推荐

  1. 把WinXP装进内存 性能飚升秒杀固态硬盘

    现在用户新配置的电脑,内存很少有小于2GB的,配置4GB内存的朋友也有不少.容量如此大的内存,我们在使用电脑的日常操作中绝对用不完.而目前制约系统性能最大的瓶颈就是硬盘的传输速度,所以,这里教你怎么把 ...

  2. SQLServer 2008的组成

    SQLServer 2008的组成: 1.主要数据库文件:有且只有一个,文件后缀为.mdf. 2.日志文件:至少有一个,文件后缀为.ldf. 3.次要数据库文件:任意个,文件后缀为.ndf.

  3. HDU 4740 The Donkey of Gui Zhou (模拟)

    由于一开始考虑的很不周到,找到很多bug.....越改越长,不忍直视. 不是写模拟的料...................... 反正撞墙或者碰到已经走过的点就会转向,转向后还碰到这两种情况就会傻站 ...

  4. Javascript数组的声明

    var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; ...

  5. 用JS判断两个数字的大小

    js中的var定义的变量默认是字符串,如果单纯的比较字符串的话,会出现错误,需要先转化为int类型在做比较. [备注:110和18在你写的程序中是18大的,因为 这两个数都是字符串,而1和1相等之后比 ...

  6. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File （四） —— ContentProvider

    ContentProvider是安卓平台中,在不同应用程序之间实现数据共享的一种机制.一个应用程序如果需要让别的程序可以操作自己的数据,即可采用这种机制.并且此种方式忽略了底层的数据存储实现,Cont ...

  7. AC自动机妙用

    理解题意之后,很自然的想到了用AC自动机搞,结果网上一搜,全是暴搜,按照自己的思想,AC自动机搞起,果然在提交了数次之后,看到了Accept. AC自动机需要三个步骤: 第一步:建立字典树: 第二步: ...

  8. Java ByteArrayOutputStream中buf 的大小增长问题

    问题:写入固定长度的字符串[write(byte b[])],观察ByteArrayOutputStream中buf 的大小始终比字符串 Bytes的Size大很多,很是不解 分析发现: privat ...

  9. Qt中QPushButton、QTabWidget等部件内容文字换行的解决方法（一定要写在源码里，写在翻译文件里不行，因为\n得不到转义）

    最近在做基于Qt的应用项目,其中有一个按钮文字超长,需要换一行显示.从网上找到的建议都是将要显示的内容做成图片,然后将图片设置为该按钮的背景.但是这样做有一个很大的局限性,当需要更改内容文字的时候,需 ...

  10. 没有开发者账号，如何解锁wp8设备

    原文 http://www.cnblogs.com/vsdot/p/3263454.html 问题的引入 好了,问题的由来是这样的,我想把我开发的wp8手机部署到手机上,可是竟然出现了下面的问题: [ ...