深夜，用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. Oracle的TPCC测试，原来也是个作弊的东西...

    http://www.oaktable.net/content/sorted-hash-clusters-rip 根据Jonathan Lewis老先生的测试实例,发觉cluster 的sort功能, ...

  2. JS闭包经典例题

    上一篇文章谈论了闭包的概念和一些应用,并给出一个例题,这篇文章就此道例题进行讨论. function fun(n,o) { console.log(o); return { fun:function( ...

  3. java web分享ppt大纲 －－ servlet容器简介

    今天在公司分享了java web的ppt,把ppt大纲放在这里,希望可以帮助需要的人 servlet容器简介 定义 狭义上的,servlet容器为java Web应用提供运行时环境,负责管理servl ...

  4. //相当于深拷贝一份dataArray。这样才不会改变dataArray本身的值

    //相当于深拷贝一份dataArray.这样才不会改变dataArray本身的值 NSMutableArray* commitDataArray = [NSKeyedUnarchiver unarch ...

  5. #pragma pack(push,1)与#pragma pack(pop)

    这是给编译器用的参数设置,有关结构体字节对齐方式设置, #pragma pack是指定数据在内存中的对齐方式. #pragma pack (n)             作用:C编译器将按照n个字节对 ...

  6. hdu1114小猪抢劫银行

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1114 完全背包 题意:给出小猪钱罐的重量和装满钱后的重量,然后是几组数据,每组数据包括每种钱币的价值与重量 ...

  7. jmeter cookie管理器 使用方法---新手学习记录1

    首先得抓包: 我已post方法为例: POST /api/datasources/lemontest/jaql HTTP/1.1 Host: 192.168.1.107:8081 Content-Le ...

  8. ios 学习笔记(8) 控件 按钮(UIButton)的使用方法

    在实际开发中,对于开发者来说,更多的还是使用“自定义”按钮.将“按钮”对象的类型设置成UIButtonTypeCustom.这样一来,按钮的所有元素都将由开发者来配置和自定义. 对于一个自定义按钮来说 ...

  9. oracle整体知识的大致介绍(1)-概念

    表空间: oracle允许不同类型的数据分开存放,表空间是数据库的逻辑划分. 数据文件: 表空间由同一磁盘上的一个或多个文件组成,这些文件叫做数据文件. 实例: 是存放和控制数据库的软件机制. ora ...

  10. JS常用方法函数（2）

    31.判断是否Touch屏幕 function isTouchScreen(){ return (('ontouchstart' in window) || window.DocumentTouch ...