利用HTML5的Canvas API可以完成我们以前意想不到的动画效果，以前我们想在网页上放置一个时钟，需要先用flash工具制作一个钟表，并写上复杂的JavaScript代码，然后载入到页面中。而HTML5的到来，我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。

今天，我们一起来使用HTML5制作一个指针会走动的时钟。

HTML

我们只需要在html中放置一个canvas标签：#clock，宽度和高度都是400px。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5应用之时钟</title>
  6. </head>
  7. <body>
  8. <canvas id="clock" width="400" height="400"></canvas>
  9. </body>
  10. </html>

Javascript

我们先来获取当前时间：包括时分秒，确保在打开页面时能定位指针位置，并且定义好圆点坐标和秒钟角度变量。

  1. var time = new Date();
  2. var h = time.getHours(); //时
  3. var m = time.getMinutes(); //分
  4. var s = time.getSeconds(); //秒
  5. h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
  6. var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量

接下来，我们利用canvas来绘制时钟，我们写一个函数draw()，绘制刻度，执行该函数一次，则秒针顺时针走动1/60个圆弧度。

首先，获取canvas绘图对象，绘制时钟刻度。我们将时钟（圆）划分为12个刻度，即每个刻度代表一个钟头，当然，你也可以划分为60个刻度，这样每个刻度就代表1分钟。

  1. function draw(){
  2. var c=document.getElementById("clock");
  3. var ctx=c.getContext("2d"); //获取绘图对象
  4. ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
  5. s++;//秒针
  6. ctx.fillStyle = '#fff' //填充白色背景色
  7. ctx.fillRect(0,0,c.width,c.height);   //设置画布区域
  8. ctx.save(); //保存当前绘图状态
  9. // 时间刻度
  10. for(var i=0;i<12;i++){ //划分12刻度
  11. var angle=(Math.PI*2)/12; //获得每个刻度对应的弧度
  12. ctx.beginPath();//开始绘制
  13. ctx.font="12px Arial"; //设置字体
  14. if(i==0||i==3||i==6||i==9){ //当指向0（12点）、3点、6点、9点时
  15. ctx.fillStyle="red"; //刻度为红色
  16. radius=4; //刻度半径长4px
  17. }else{
  18. ctx.fillStyle="blue"; //刻度为蓝色
  19. radius=3; //刻度半径长为3px
  20. }
  21. ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆作为刻度
  22. ctx.fill(); //填充路径
  23. transform(ctx,x,y,angle,true);  //刻度分布
  24. }
  25. ctx.restore(); //恢复上次保存的绘图状态
  26. ...
  27. }

按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。

  1. function draw(){
  2. ...
  3. sAngle=(Math.PI*2)/60*s; //秒度
  4. //时针转动
  5. ctx.save();
  6. ctx.strokeStyle="red";
  7. ctx.lineWidth=3;
  8. transform(ctx,x,y,(Math.PI*2)/60*h);
  9. sj(ctx,x,y,y-40);
  10. ctx.restore();
  11. //分针转动
  12. ctx.save();
  13. ctx.strokeStyle="blue";
  14. ctx.lineWidth=2;
  15. transform(ctx,x,y,(Math.PI*2)/60*m);
  16. sj(ctx,x,y,y-68);
  17. ctx.restore();
  18. //秒针转动
  19. ctx.save();
  20. ctx.strokeStyle="#000";
  21. transform(ctx,x,y,sAngle);
  22. sj(ctx,x,y,y-80);
  23. ctx.restore();
  24. //数据整理
  25. if(s%60==0){
  26. sAngle=0,s=0,m++;
  27. if(m%12==0){ //每十二分 时针旋转一次
  28. if(m!=0)h++;
  29. if(m%60==0)m=0;
  30. }
  31. if(h%60==0)h=0;
  32. }
  33. }

每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细，绘制指针，根据弧度转动指针位置，其中我们调用了自定义函数trans()和pointer()。

函数pointer()用来绘制指针。其中ctx表示canvas对象，x,y是圆点坐标，z是指针头的位置。

  1. function pointer(ctx,x,y,z){
  2. ctx.beginPath();
  3. ctx.moveTo(x,y);
  4. ctx.lineTo(x,z);
  5. ctx.stroke();
  6. ctx.fill();
  7. }

函数transform()用来旋转指针。其中ctx表示canvas对象，x,y是圆点坐标，angle是转动角度。

  1. function trans(ctx,x,y,angle){
  2. ctx.transform(Math.cos(angle), Math.sin(angle),
  3. -Math.sin(angle), Math.cos(angle),
  4. x*(1-Math.cos(angle)) + x*Math.sin(angle),
  5. y*(1-Math.cos(angle)) - y*Math.sin(angle))
  6. }

最后，我们设置每隔1秒钟（即1000毫秒）执行一次draw()。

    1. setInterval("draw()",1000);

HTML5应用之时钟的更多相关文章

  1. html5制作一个时钟

    试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...

  2. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  3. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  4. 一款纯html5实现的时钟

    今天给大家分享一款非常漂亮的纯html5实现的时钟.整个界面都由html5绘制而成.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  5. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  6. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  9. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

随机推荐

  1. jquery判断自己是父节点的第几个子节点

    <div> <span>内容</span> <span>内容</span> <span>内容</span> < ...

  2. Informix如何释放异常的锁资源

    问题 在Informix数据库中,锁的使用和释放是自动完成的.但在某些异常情况下,当前台程序退出(正常或异常)后,相应在数据库中的会话没有终止,其占有的资源(主要是锁)没有被释放,影响了其他用户的使用 ...

  3. ajax 如何实现页面跳转

    老师,您好.jquery的ajax如何实现页面跳转?例如:登陆页面属于用户名和密码后,点击登陆,验证用户名和密码,正确后,跳转到其他页面.能否给个例子. 下面列了五个例子来详细说明,这几个例子的主要功 ...

  4. poj 2299 Ultra-QuickSort ：归并排序求逆序数

    点击打开链接 Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 34676   Accepted ...

  5. Hive表数据导出

    方式一: hadoop命令导出 hadoop fs -get hdfs://hadoop000:8020/data/page_views2 pv2  方式二:通过insert...directory导 ...

  6. 剑指Offer:面试题18——树的子结构(java实现)

    问题描述: 输入两棵二叉树A和B,判断B是不是A的子结构.二叉树结点的定义如下: public class TreeNode { int val = 0; TreeNode left = null; ...

  7. MongoDB基本操作命令

    由于工作需要,笔者这两天使用了一下MongoDB.真的很不习惯!但是确实好用,命令比mysql和sqlserver简单很多.在这里整理一些MongoDB的基本操作命令分享出来. 客户端的安装就不说了, ...

  8. 关于static/const的作用

    这个简单的问题很少有人能回答完全.在C语言中,关键字static有三个明显的作用: 1)在函数体内,一个被声明为静态的变量在这一函数被调用过程中维持其值不变(该变量存放在静态变量区). 2) 在模块内 ...

  9. MVC session过期如何处理跳转

    以前我们总是会写一个基类也叫父类来判断session是否已过期然后跳转到指定的错误页面或者登陆界面,然后让所有的页面都继承这个基类,但是当我们应用到MVC项目中时,发现该方法并不会起作用.这时我们可以 ...

  10. hadoop2.5.1搭建(二）

    第一篇主要是整体的步骤,其实中间遇到很多问题,第二篇将遇到的问题全部列举下来: 1.1包不能加载警告 WARN util.NativeCodeLoader: Unable to load native ...