利用空余时间学习一下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. （大数据工程师学习路径）第一步 Linux 基础入门----简单的文本处理

    介绍 这一节我们将介绍这几个命令tr(注意不是tar),col,join,paste.实际这一节是上一节关于能实现管道操作的命令的延续,所以我们依然将结合管道来熟悉这些命令的使用. 一.常用的文本处理 ...

  2. EXCEL Pivot table manipulate

    Add filter For the Demo time,I would like to filter out the products which not in Red and Black colo ...

  3. JMeter怎么在get URL请求、POST请求中添加动态参数用于服务器段安全验证

    从前一个页面(含有服务器段返回给客户端的参数,用于在下一次请求时验证)中添加后置处理器中的Regular Expression Extractor,使用正则表达式对参数进行提取. 在用到这些变量时可以 ...

  4. 模拟linux下的ls -l命令

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...

  5. Caused by: java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory

    1.错误叙述性说明 2014-7-12 0:38:57 org.apache.catalina.core.ApplicationContext log 信息: No Spring WebApplica ...

  6. jquery扩展

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  7. oracle_体系结构图_逻辑结构图

    1.oracle 的体系结构图  重要!!! 2.oracle的逻辑结构图

  8. Swift中文教程(五)--对象和类

    原文:Swift中文教程(五)--对象和类 Class 类 在Swift中可以用class关键字后跟类名创建一个类.在类里,一个属性的声明写法同一个常量或变量的声明写法一样,除非这个属性是在类的上下文 ...

  9. 批处理获取IP地址

    setlocal ENABLEEXTENSIONS & set "i=0.0.0.0" & set "j=" for /f "toke ...

  10. 【百度地图API】如何进行地址解析与反地址解析？——模糊地址能搜索到精确地理信息！

    原文:[百度地图API]如何进行地址解析与反地址解析?--模糊地址能搜索到精确地理信息! 摘要: 什么是地址解析? 什么是反地址解析? 如何运用地址解析,和反地址解析? 可以同时运用地址解析,和反地址 ...