深夜，用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. Qt在windows与Mac OS中获取执行程序版本号

    1 windows中获取执行文件exe的版本号   QString GetFileVertion(QString aFullName) { QString vRetVersion; string vF ...

  2. [置顶] C++基础之六：运算符的重载

    网上太多有关运算符的重载了,但是写的太过的详细,不适合新手入门,特别是那什么++和--的前增量后增量重载,一元二元运算符重载,特殊运算符,下标运算符,new和delete,甚至是指针运算符的重载,吓退 ...

  3. 快速学习使用 Windows Azure 上的 SharePoint Server 2013

     为了在当今的企业环境中占据一席之地,您需要能够迅速顺应变化和应对挑战.有时,需要及时调整您的SharePoint 基础结构以保持竞争优势. 基础结构即服务可通过随时使用.即付即用的解决方案应对这 ...

  4. android 解决ViewPager双层嵌套的滑动问题

    解决ViewPager双层嵌套的滑动问题 今天我分享一下ViewPager的双层嵌套时影响内部ViewPager的触摸滑动问题 之前在做自己的一个项目的时候,遇到广告栏图片动态切换,我第一时间想到的就 ...

  5. Duanxx的图像处理学习： 透视变换(一)

    当人用眼睛看事物的时候,会感觉到近处的东西是比远处的东西要大一些的,通俗的说,这就是透视. 总的来说.透视变换是将3D的世界转换到2D图像上的一种手段,人的视觉系统和摄像头视觉系统也是基于这一工作原理 ...

  6. distributor之Interrupt Set/Clear-Active Registers, GICD_IS/CACTIVERn

    set active寄存器.顾名思义就是把一个中断置为active状态,clear active寄存器就是清除active状态,在这里我们有必要说明一下中断状态的一些概念: active状态:假设此时 ...

  7. Selenium之偷懒教程

    进来一直停留在基础理论知识的学习中,认为太乏味,就写了一个网页自己主动化的demo:自己主动写日报.省的以后自己打开网页写啦. 直接上代码: 自己主动填写日报DEMO import java.io.B ...

  8. 日常之学习CSS3变形和js函数指针

    1,transform变形属性,包括rotate(xxdeg)旋转,translate(x轴px,y轴px)移动,scale(0.5,2)变形(x轴缩小0.5倍,y轴放大2倍),skew(x轴deg, ...

  9. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  10. 最近adt升级引起的问题

    其实也不知道是什么原因引起的,因为 之前安装的adt就是23.0.3的版本,但是最近突然创建安卓工程时出现了如下问题 D:\workspace\appcompat_v7\res\values-v21\ ...