利用空余时间学习一下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. Qt原始资源形象问题后删除

        这些天Qt请项目超市收银系统,作为练一练手,无论如何,亦休闲亦无关,做几乎同样的.旨在取代以前的资源图片, 是什么改变了,码里面的路径都改了.还是编译只是去,总是提示这样一个错误. <s ...

  2. Javascript DOM编程艺术

    Chapter 0 为什么读这本书?作为js入门书,补基础,由于本书代码demo较简单,并没有贴代码,只记录一些自己要注意的知识点以及代码脚本 Chapter 1: javascript简史 DOM全 ...

  3. SQL Server的还原

    原文:SQL Server的还原 1.差异备份的还原 不备份结尾日志的情况下还原数据 创建差异备份的放在我们已经在前面一篇博客SQL Server的备份中提到了,这里我们不再赘述,下面我们给出差异备份 ...

  4. Oracle使用并行索引需要注意的问题

    当索引的结构.我们要建立索引快.它将并行加,加平行后.这将平行的列索引. 当并行度索引访问,CBO你可能会考虑并行运行,这可能会导致一些问题.作为server候用并行会引起更加严重的争用.当使用并行后 ...

  5. Date、DateTime值的格式化扩展函数

    public static class DateTimeExtensions    {        public static DateTime ToUtc(this DateTime time)  ...

  6. Sql使用视图（简单的视图）适合入门-level

    创建以便从库更好的数据呼叫和一个数据库,以(例如,该209东东库转移205图书馆) 例:209图书馆有不同的库名:数据库(AIS20140417092531电影库)供应商表(t_Supplier ). ...

  7. Tomcat剖析（一）：一个简单的Web服务器

    Tomcat剖析(一):一个简单的Web服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三):连接器 ...

  8. hdu 3874

    求一个序列中全部数字的和,当中数值同样的仅仅能计算一次. 先储存全部的请求,然后依照它们的右边界排序,在查询的同一时候更新区间.这里事实上有一点点DP的味道,在它进行某个查询之前,保证全部的反复数字( ...

  9. GitHub Top 100 简介

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. GitHub 地址:https://github.co ...

  10. [CLR via C#]1.6 Framework类库~1.9与非托管代码的互操作性

    原文:[CLR via C#]1.6 Framework类库~1.9与非托管代码的互操作性 1.6 Framework类库 1. .NET Framework中包含了Framework类库(Frame ...