利用空余时间学习一下html5.
 <!doctype html>

 <html>

     <head></head>

     <body>

         <canvas id="clock" width="500" height="500"></canvas>

         <script>

             var clock=document.getElementById('clock');

             var cxt = clock.getContext('2d');

             function drawClock(){

                 //清除画布

                 cxt.clearRect(0,0,500,500);

                 var now = new Date();

                 var sec = now.getSeconds();

                 var min = now.getMinutes();

                 var hour = now.getHours();

                 //小时必须获取浮点类型(小时+分数转化成的小时);

                 hour= hour+min/60;

                 //问题：2014年8月18日 22:08:41

                 //将24小时进制转换成12小时

                 hour= hour>12?hour-12:hour;

                 //表盘(蓝色)

                 cxt.lineWidth=10;

                 cxt.strokeStyle="blue";

                 //刻度

                 cxt.beginPath();

                 cxt.arc(250,250,200,0,360,false);

                 cxt.closePath();

                 cxt.stroke();

                 //时刻度

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

                     cxt.save();//保持当前状态

                     cxt.lineWidth=10;//设置时针的粗细

                     cxt.strokeStyle="#000";//设置时针颜色

                     cxt.translate(250,250);//设置0,0点

                     cxt.rotate(i*30*Math.PI/180);//设置旋转角度（=角度*Math*PI/180）

                     cxt.beginPath();

                     cxt.moveTo(0,-170);

                     cxt.lineTo(0,-190);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();//释放状态

                 }

                  //分刻度

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

                     cxt.save();//保持当前状态

                     cxt.lineWidth=5;//设置时针的粗细

                     cxt.strokeStyle="#000";//设置时针颜色

                     cxt.translate(250,250);//设置0,0点

                     cxt.rotate(i*6*Math.PI/180);//设置旋转角度（=角度*Math*PI/180）

                     cxt.beginPath();

                     cxt.moveTo(0,-180);

                     cxt.lineTo(0,-190);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();//释放状态

                 }

                  //时针

                   cxt.save();

                  //设置时针风格

                  cxt.lineWidth=10;

                  cxt.strokeStyle="#000";

                  //设置异次元空间的0,0点

                  cxt.translate(250,250);

                  cxt.rotate(hour*30*Math.PI/180)//设置旋转角度

                  cxt.beginPath();

                  cxt.moveTo(0,-140);

                  cxt.lineTo(0,10);

                  cxt.closePath();

                  cxt.stroke();

                  cxt.restore();

                  //分针

                  cxt.save();

                  cxt.lineWidth=7;

                  cxt.strokeStyle="#000";

                  //设置异次元空间的0,0点

                  cxt.translate(250,250);

                  cxt.rotate(min*6*Math.PI/180)//设置旋转角度

                  cxt.beginPath();

                  cxt.moveTo(0,-160);

                  cxt.lineTo(0,15);

                  cxt.closePath();

                  cxt.stroke();

                  cxt.restore();

                  //秒针

                  cxt.save();

                  cxt.lineWidth=3;

                  cxt.strokeStyle="red";

                  //设置异次元空间的0,0点

                  cxt.translate(250,250);

                  cxt.rotate(sec*6*Math.PI/180)//设置旋转角度

                  cxt.beginPath();

                  cxt.moveTo(0,-170);

                  cxt.lineTo(0,20);

                  cxt.closePath();

                  cxt.stroke();

                  //画出时针,分针,秒针的交叉点

                  cxt.beginPath();

                  cxt.arc(0,0,5,0,360,false);

                  //设置填充样式

                  cxt.fillStyle="yellow";

                  cxt.fill();

                  //设置笔触样式

                  cxt.stroke();

                  //设置秒针钱小圆点

                  cxt.beginPath();

                  cxt.arc(0,-150,5,0,360,false);

                  //设置填充样式

                  cxt.fillStyle="yellow";

                  cxt.fill();

                  //设置笔触样式

                  cxt.stroke();

                  cxt.restore();

         }

             //使用setInterval(代码，毫秒时间)时钟转动

             drawClock();

             setInterval(drawClock,1000);

         </script>

     </body>

 </html>

显示效果：

html5学习(一)--canvas画时钟的更多相关文章

  1. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  2. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  4. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  5. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  6. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  7. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  8. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  9. 用canvas画时钟

    效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...

随机推荐

  1. android获取ip和本机的物理地址

    <span style="font-size:18px;">/** * 获取ip * * @return */ public static String getLoca ...

  2. JSP/Servlet线程安全

    携带servlet开发时间.线程安全是非常重要的.否则会导致一些意想不到的结果. Servlet的生命周期是由Web负责集装箱,什么时候client第一个请求Servlet时间,容器负责初始化Serv ...

  3. acdream 1431 Sum vs Product

    Sum vs Product Time Limit: 4000/2000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...

  4. hdu 4445 Crazy Tank （暴力枚举）

    Crazy Tank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. UML对象图和包图

    UML九已经介绍过的基本图,然后,我们再来看看对象图和包图.  一.对象图 谈到对象.我们不得不说一下对象.对象(Object)是对象类的实例(Instance),用于模型化特定的实体.对象是唯一的. ...

  6. typedef和define具体的具体差异

      1) #define这是一个预处理指令,简单的更换当预处理程序.不检查的正确性,仍不能正常关机进入的意思,那里只是已被展开时编译源代码会发现可能的错误和错误. 例如: #define PI 3.1 ...

  7. 网络资源(8) - JAX-RS视频

    2014_08_25 http://v.youku.com/v_show/id_XNjAzMzA4MTY0.html JAX-RS 2.0 RESTful Java on Steroids, by A ...

  8. MPI编程简述

    第三章MPI计划 3.1 MPI简单介绍 多线程是一种便捷的模型,当中每一个线程都能够訪问其他线程的存储空间.因此,这样的模型仅仅能在共享存储系统之间移植. 一般来讲,并行机不一定在各处理器之间共享存 ...

  9. hdu Word Amalgamation（map）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1113 找单词 #include <iostream> #include <strin ...

  10. bigdata_hiveserver2报错_thrift

    问题一: php客户端,链接hiveserver2 ,报错 如下 1: server.TThreadPoolServer (TThreadPoolServer.java:run(215)) - Err ...