试着用html5写一个时钟

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

---------------------------------------------------------------------------------------------

其实并不难，主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveTo(),lineTo();beginPath();requestAnimationFrame()；在开始看下面的代码的时候最好先弄清楚这些方法的原理和作用，另外canvas有个重要特性:canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法.

好了，开始代码，先开始画12个小时和60分钟的线条(一些需要步骤在代码有注释):

        function rotateFun(){

              var now= new Date();//获取当前时间对象，对以后指针旋转很重要

       var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境

       ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示

       ctx.save();//第一个保存状态

       ctx.fillStyle='rgba(20,20,20,0.2)';

       ctx.fillRect(0,0,800,600);

       ctx.translate(400,300);//平移画布中心到中心 

       //画12个小时

       ctx.save();

       for (var i = 0; i < 12; i++) {

         ctx.strokeStyle='black';

         ctx.rotate(2*Math.PI/12);

         ctx.moveTo(120,0);

         ctx.lineTo(100,0);

         ctx.lineWidth=8;

         ctx.stroke();

       }

       ctx.restore(); 

       //画60个分钟

       ctx.save();

       for (var i = 0; i <60 ;i++) {

         ctx.strokeStyle='black';

         ctx.rotate(2*Math.PI/60);

         ctx.moveTo(115,0);

         ctx.lineTo(105,0);

         ctx.lineWidth=2;

         ctx.stroke();

       }

       ctx.restore();

       ctx.restore()

        }

-----------------------------------------------------------------------

静态完了就是动态的，指针随着时间而走动.这里指针走的原理是：每一帧调用后都是重新画的一个画布，里面的指针，12个小时和60分钟的线条都是新的，只是下一秒后就物是人非，整个画布就转了某个角度，但是指针相对画布还是静止没有变过的，所以我们的眼睛就会产生了指针随着时间走的效果，另外就是指针指在当前时间都是参数控制的，代买如下:

            var hour=now.getHours();

      var min=now.getMinutes();

      var sec=now.getSeconds();

      //画秒针

      ctx.save();

      ctx.beginPath();

      ctx.rotate(sec*Math.PI/30);

      ctx.strokeStyle='black';

      ctx.lineWidth=4;

      ctx.moveTo(0,30);

      ctx.lineTo(0,-112);

      ctx.stroke();

      ctx.closePath();

      ctx.restore();

      //画分钟

      ctx.save();

      ctx.beginPath();

      ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);

      ctx.strokeStyle='black';

      ctx.lineWidth=6;

      ctx.moveTo(0,28);

      ctx.lineTo(0,-83);

      ctx.stroke();

      ctx.closePath();

      ctx.restore();

      //画时钟

      ctx.save();

      ctx.beginPath();

      ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);

      ctx.strokeStyle='black';

      ctx.lineWidth=8;

      ctx.moveTo(0,26);

      ctx.lineTo(0,-63);

      ctx.stroke();

      ctx.closePath();

      ctx.beginPath();

      ctx.strokeStyle='blue';

      ctx.arc(0,0,126,0,2*Math.PI);

      ctx.stroke();

      ctx.closePath();

      ctx.restore();

      ctx.restore();

------------------------------------------------------------

好了，知道了这些原理：给出完整的代码,这些代码还有优化改进的地方：

                    <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>rotate</title>

 </head>

 <body>

 <canvas id='canvas' width="800" height="600"></canvas>

 <script>

    function rotateFun(){

       var now= new Date();//获取当前时间对象，对以后指针旋转很重要

       var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境

       ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示

       ctx.save();//第一个保存状态

       ctx.fillStyle='rgba(20,20,20,0.2)';

       ctx.fillRect(0,0,800,600);

       ctx.translate(400,300);//平移画布中心到中心 

       //画12个小时

       ctx.save();

       for (var i = 0; i < 12; i++) {

         ctx.strokeStyle='black';

         ctx.rotate(2*Math.PI/12);

         ctx.moveTo(120,0);

         ctx.lineTo(100,0);

         ctx.lineWidth=8;

         ctx.stroke();

       }

       ctx.restore(); 

       //画60个分钟

       ctx.save();

       for (var i = 0; i <60 ;i++) {

         ctx.strokeStyle='black';

         ctx.rotate(2*Math.PI/60);

         ctx.moveTo(115,0);

         ctx.lineTo(105,0);

         ctx.lineWidth=2;

         ctx.stroke();

       }

       ctx.restore();

       var hour=now.getHours();

       var min=now.getMinutes();

       var sec=now.getSeconds();

       //画秒针

       ctx.save();

       ctx.beginPath();

       ctx.rotate(sec*Math.PI/30);

       ctx.strokeStyle='black';

       ctx.lineWidth=4;

       ctx.moveTo(0,30);

       ctx.lineTo(0,-112);

       ctx.stroke();

       ctx.closePath();

       ctx.restore();

       //画分钟

       ctx.save();

       ctx.beginPath();

       ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);

       ctx.strokeStyle='black';

       ctx.lineWidth=6;

       ctx.moveTo(0,28);

       ctx.lineTo(0,-83);

       ctx.stroke();

       ctx.closePath();

       ctx.restore();

       //画时钟

       ctx.save();

       ctx.beginPath();

       ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);

       ctx.strokeStyle='black';

       ctx.lineWidth=8;

       ctx.moveTo(0,26);

       ctx.lineTo(0,-63);

       ctx.stroke();

       ctx.closePath();

       ctx.beginPath();

       ctx.strokeStyle='blue';

       ctx.arc(0,0,126,0,2*Math.PI);

       ctx.stroke();

       ctx.closePath();

       ctx.restore();

       ctx.restore();

       window.requestAnimationFrame(rotateFun);

    }

    rotateFun();

 </script>

 </body>

 </html>

00:45:50

html5制作一个时钟的更多相关文章

  1. 利用html5制作一个时钟动画

    <canvas id="clock" width="500" height="500" style="background- ...

  2. HTML5应用之时钟

    利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...

  3. 用Phaser来制作一个html5游戏——flappy bird （二）

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

  4. 使用HTML5制作时钟

    之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...

  5. 用Phaser来制作一个html5游戏——flappy bird （一）

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  6. html5写的一个时钟

    看到的一个html5写的时钟 <!doctype> <html> <head> <script> window.onload=function(){ v ...

  7. 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

    来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...

  8. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  9. 利用javafx编写一个时钟制作程序

    1.首先创建一个时钟类,用于编写时钟的各种特有属性 package javaclock; /** * * @author admin */import java.util.Calendar;impor ...

随机推荐

  1. C# String.Format大全 去 decimal 后面的 0

    转 http://kwon.iteye.com/blog/1068255  http://blog.csdn.net/tvvbbb/article/details/47256943 public st ...

  2. javascript闭包的一个例子

    <html> <head> <title>elementFromPoint</title> <script type="text/jav ...

  3. java socket通讯（二）处理多个客户端连接

    通过java socket通讯(一) 入门示例,就可以实现服务端和客户端的socket通讯,但是上一个例子只能实现一个服务端和一个客户端之间的通讯,如果有多个客户端连接服务端,则需要通过多线程技术来实 ...

  4. POJ 3422 Kaka's Matrix Travels 【最小费用最大流】

    题意: 卡卡有一个矩阵,从左上角走到右下角,卡卡每次只能向右或者向下.矩阵里边都是不超过1000的正整数,卡卡走过的元素会变成0,问卡卡可以走k次,问卡卡最多能积累多少和. 思路: 最小费用最大流的题 ...

  5. HTML控件-Select

    从今天开始,编写对于html控件的特性的探索文章,会广泛的引用网络的资源,所以本文的版权属于广大人民群众,欢迎转载,也同样禁止商业应用. [高手勿喷,标签页点击红色叉叉] select控件有一个特性: ...

  6. onmousemove和onmouseout事件的调用，和js使用双引号、单引号的时候应该注意的问题

    使用js的时候,统一使用双引号,然后通过反斜杠进行转义 ①如果同时使用单引号.和双引号的情况下容易出现问题,导致标签中表示的事件不能调用, ②导致由于标签没有封口而出现样式布局错误 <!DOCT ...

  7. The Ninth Hunan Collegiate Programming Contest (2013) Problem I

    Problem I Interesting Calculator There is an interesting calculator. It has 3 rows of button. Row 1: ...

  8. Grunt 之 watch 和 livereload

    现在 watch 中已经集成了 livereload ,所以把它们放在一起说明. watch 可以监控特定的文件,在添加文件.修改文件.或者删除文件的时候自动执行自定义的任务,比如 livereloa ...

  9. jmeter随笔（7）--查看请求响应，为空

    问题:查看请求响应,为空 解决办法: 1.在jmeter3.0版本上找到请求,在[Advanced]下勾选"从HTML文件获取所有内含的资源" 2.运行查看,结果如下

  10. php操作mysql的基础链接实例