深夜，用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. linux Bash bug修复记录

  2. 【HDU】病毒侵袭持续中（AC自己主动机+map）

    一開始一直WA,之后发现这道题不止一组输入,改成多组输入之后就过了. 利用map把每一个字符串映射到它相应的结点上即可了. 11909467 2014-10-19 11:54:00 Accepted ...

  3. NGUI Button 3中点击事件的触发

    NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,点击按钮触发的方法名必须为OnClick,当 ...

  4. GDI+ 对象释放崩溃的问题

    确保在Gdiplus::GdiplusShutdown(m_gdiplusToken); 之前delete 掉GDI+的对象,例如:delete *pBitmap; 如果先Gdiplus::Gdipl ...

  5. 搜索（BFS）

    Problem B: Fire! Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and t ...

  6. Java中Calender引用类型

    某些时候需要使用深拷贝: Calendar startTime = (Calendar) this._paramModel.getStartTime().clone(); 这样对startTime.a ...

  7. canvas绘制弹跳小球

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. python10min系列之多线程下载器

    今天群里看到有人问关于python多线程写文件的问题,联想到这是reboot的架构师班的入学题,我想了一下,感觉坑和考察的点还挺多,可以当成一个面试题来问,简单说一下我的想法和思路吧,涉及的代码和注释 ...

  9. java时间验证工具

    可以验证2014-02-21这种错误

  10. mybatis+spring+c3p0+maven+ehcache

    项目截图 pom.xml如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...