深夜，用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. 应用AXIS开始Web服务之旅(soap web services)——使用三种不同的语言访问创建的Web服务，分别是JAVA、VB、VC

    一． 介绍 本文并不是想介绍Web服务的原理.系统架构等,我们假设您已经了解了关于Web服务的一些基本的概念.原理等知识.本文主要是针对那些已经了解Web服务概念,但是还没有亲身体会Web服务所带来令 ...

  2. 封装的localstorge的插件，store.js

    封装的localstorge的插件,store.js https://github.com/marcuswestin/store.js/

  3. UVA-Matrix Chain Multiplication（栈）

     Matrix Chain Multiplication  Suppose you have to evaluate an expression like A*B*C*D*E where A,B,C, ...

  4. [ACM] POJ 2253 Frogger （最短路径变形，每条通路中的最长边的最小值）

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24879   Accepted: 8076 Descript ...

  5. codeforces #260 DIV 2 C题Boredom（DP）

    题目地址:http://codeforces.com/contest/456/problem/C 脑残了. .DP仅仅DP到了n. . 应该DP到10w+的. . 代码例如以下: #include & ...

  6. 在SSIS包中使用 Checkpoint从失败处重新启动包

    使用SSIS做ETL的过程中会遇到各种各样的错误,对于一些大数据量的Job失败以后我们不希望重新运行,因为重新运行的时间开销是非常大的,我们只希望从失败的部分开始运行,这样可以省去很多的时间. SSI ...

  7. django-rest-framework 快速开始

    搭建项目 # Set up a new project django-admin.py startproject tutorial cd tutorial # Create a virtualenv ...

  8. BZOJ 2064: 分裂( 状压dp )

    n1+n2次一定可以满足..然后假如之前土地集合S1的子集subs1和之后土地集合S2的子集subs2相等的话...那么就少了2个+操作...所以最后答案就是n1+n2-少掉的最多操作数, 由状压dp ...

  9. Spring学习之Aop的各种增强方法

    AspectJ允许使用注解用于定义切面.切入点和增强处理,而Spring框架则可以识别并根据这些注解来生成AOP代理.Spring只是使用了和AspectJ 5一样的注解,但并没有使用AspectJ的 ...

  10. JBoss 系列七十：一个简单的 CDI Web 应用

    概述 本文通过一个简单的 CDI Web 应用演示dependency injection, scope, qualifiers 以及EL整合.应用部署完成后我们可以通过http://localhos ...