利用空余时间学习一下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. Round #169 (Div. 2)D. Little Girl and Maximum XOR

    1.首先是要找到一个位置从左至右,作l这一个是0,r这一个是1. 2.实例01011,10100.你将能够找到01111和10000. #include<cstdio> #include& ...

  2. AngularJS+ASP.NET MVC+SignalR实现消息推送

    原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现 ...

  3. 每天收获一点点------Hadoop基本介绍与安装配置

    一.Hadoop的发展历史 说到Hadoop的起源,不得不说到一个传奇的IT公司—全球IT技术的引领者Google.Google(自称)为云计算概念的提出者,在自身多年的搜索引擎业务中构建了突破性的G ...

  4. Angular绑定数据时转义html标签

    AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}&l ...

  5. 字符串属性 NSMutableAttributedString/NSAttributedString

    因为iOS7新出的NSTextStorge是NSMutableAttributedString的子类.所以要用好NSTextStorage.首先要学好NSMutableAttributedString ...

  6. sharepoint 2013 更改用户配置文件属性值的方法 modify user profile

    在此前写了两篇文章sharepoint 的UserProfile博客 sharepoint 2010 获取用户信息UserProfile方法 sharepoint 2010 怎样用SocialComm ...

  7. android activity 后的形式 藏

    activity 希望的形式 于AndroidManifest.xml  建立 theme 属性 <activity             android:name="zicox.u ...

  8. JS中call、apply的用法说明

    JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...

  9. 私人定制javascript事件处理机制(浅谈)

    看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...

  10. Mac OS X于Android Kernel下载方法

    于上一篇日志中,我总结了大家提供的下载Android源代码的方法.这里再简单总结一下内核的下载方法. 參考这里的介绍:http://source.android.com/source/building ...