利用空余时间学习一下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. python 基础知识点整理 和详细应用

    Python教程 Python是一种简单易学,功能强大的编程语言.它包含了高效的高级数据结构和简单而有效的方法,面向对象编程.Python优雅的语法,动态类型,以及它天然的解释能力,使其成为理想的语言 ...

  2. ASP.NET验证控件

    在此过程中房间的收费制度时,.为了验证文本框是否为空.用户存在.合法等等.我们都要单独写代码.学习了ASP.NET的验证控件,省了非常多事. ASP.NET能够轻松实现对用户输入的验证. 让我们好好回 ...

  3. Linux对于录音

    一.原理简介 在Linux下,记录--从dsp读取数据.播放--至dsp设备写入数据. 开发板採用声卡UDA1341实现音频编解码,完毕A/D和D/A转换,芯片UDA1341与CPU的连接图例如以下: ...

  4. Maven+struts2+spring4+hibernate4的环境搭建

    搭建Maven+struts2+spring4+hibernate4其实并不难!但开始弄的时候还是费了我好大的力气,老是出现这样那样的错误!好了,废话不多说,开始搭建开发环境. 一.Myeclipse ...

  5. ABP领域层——实体

    ABP领域层——实体 基于DDD的现代ASP.NET开发框架--ABP系列之10.ABP领域层——实体 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的 ...

  6. [WF4.0 实战] WPF + WCF + WF 打造Hello World（基础篇）

    本篇博客是一个基础的演示样例,也就是一个新手教程吧!让大家熟悉一下WPF + WCF + WF三者的关系!这仅仅是一个基础篇,下篇会继续深入,作为这段时间研究工作流的一个小小总结! 三者关系: WPF ...

  7. java7 语法糖 之　switch 声明string

    Jdk7新switch 恒语句可以string种类. 例如: @Test public void test_1(){ String string = "hello"; switch ...

  8. Java设计模式（八）观察者模式 迭代器模式

    (十五)观察者模式 观察者模式,定义对象间一对多关系,一个对象状态发生改变,全部依赖于它的对象都收到通知而且自己主动更新,观察者与被观察者分开.比如邮件订阅.RSS订阅,假设有更新就会邮件通知你. i ...

  9. 使用SignalR打造消息总线

    使用SignalR为FineUI/Webform打造消息总线 第一次写博客,语言组织能力不好,请大家多多包涵! 效果图如下: 图片的右下角即为SignalR消息总线的消息框. 一.建立SignalR服 ...

  10. SSAS系列——【06】多维数据（创建Cube）

    原文:SSAS系列--[06]多维数据(创建Cube) 1.文件类型说明 项目定义文件 (.dwproj).项目用户设置 (.dwproj.user).数据源文件 (.ds).数据源视图文件 (.ds ...