Hey,guys! 让我们一起用HTML5实现一下简易时钟吧！

接触canvas时， 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的。所以，如果你对 PS里的 钢笔工具 运用自如的话，恭喜你，canvas你将很快上手~~

说下对HTML5中canvas的理解，canvas翻译成中文就是画布，顾名思义，canvas当然是用来作画的啦~~

作画嘛，其实现的思想 与 photoshop 基本上是一样的~~，只不过photoshop可以用可视化工具， 而来到HTML5 / JS 就是用代码自己手敲而已。

所以总结一下： canvas 是用来画画的！至于你想画点什么，就是你自己的事咯！

canvas对象中getContext('2d')，就相当于是 PS里的 钢笔工具，下面说一下它们对应关系：

beginPath---->  开始画路径

moveTo ----->  路径开始点

lineTo ------->  拉直线路径到甘个点

clothPath --->  闭合路径

stroke ------>  描边路径(这也是为什么当lineWidth设为大于1px时，如10px，它是从中间向两边各分一半的原因，PS里的 钢笔工具 就是这样的)

fill----------->  填充路径

bezierCurveTo 和 quadraticCurveTo 更是 PS里的 钢笔工具 的精髓之处！

等等等等......

好，如果你感兴趣的话，可以去折腾一下 PS里的 钢笔工具 哦，相信会对你理解canvas对象中getContext('2d')的属性和方法有一定帮助

下面是HTML5时钟的实现代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="textml; charset=utf-8">

 <title>clock by html5</title>

 <style>

 body {

     background: #333;

 }

 #canvas1 {

     display: block;

     width: 400px;

     margin: 100px auto;

 }

 </style>

 <script>

 window.onload = function (){

     var oC = document.getElementById('canvas1');

     var oCtx = oC.getContext('2d');

     var x = 0;    //圆心x

     var y = 0;    //圆心y

     var r = 0;    //圆心r

     initialize();

     setInterval(DrawUpdate,1000);

     function initialize(){

         x = 200;    //圆心x

         y = 200;    //圆心y

         r = 150;    //圆心r

         oCtx.strokeStyle = '#1ec1e4';

         oCtx.fillStyle = '#333';

         //画秒刻度

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

             oCtx.beginPath();

             oCtx.moveTo(x, y);

             oCtx.arc(x, y, r, i*6*Math.PI/180, (i+1)*6*Math.PI/180);

             oCtx.stroke();

         }

         oCtx.closePath();

         oCtx.beginPath();

         oCtx.arc(x, y, r-8, 0, 2*Math.PI);

         oCtx.closePath();

         oCtx.fill();    

         //画分钟刻度

         oCtx.lineWidth = 2;

         oCtx.beginPath();

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

             oCtx.moveTo(x, y);

             oCtx.arc(x, y, r, i*30*Math.PI/180, i*30*Math.PI/180);

             oCtx.stroke();

         }

         oCtx.closePath();

         /*

         在DrawUpdate中可以实现，就没必要了

         oCtx.beginPath();

         oCtx.arc(x, y, r-12, 0, 2*Math.PI);

         oCtx.closePath();

         oCtx.fill();

         oCtx.closePath();*/

         DrawUpdate();

     }

     //负责更新时间

     function DrawUpdate(){

         var iSecValue = 0;    //秒针对应的刻度

         var iMinValue = 0;    //分针对应的刻度

         var iHourValue = 0;    //时针对应的刻度

         var oDate = new Date();

         var iSec = oDate.getSeconds();

         var iMin = oDate.getMinutes();

         var iHour = oDate.getHours();

         iSecValue = (- 90 + iSec*6) * Math.PI/180;

         iMinValue = (- 90 + iMin*6 + iSec/10)* Math.PI/180;

         iHourValue = (- 90 + iHour*30 + iMin/2)* Math.PI/180;

         //遮罩,覆盖原来的时间

         oCtx.beginPath();

         oCtx.arc(x, y, r-12, 0, 2*Math.PI);

         oCtx.closePath();

         oCtx.fill();    

         //画时针

         oCtx.lineWidth = 3;

         oCtx.beginPath();

         oCtx.moveTo(x, y);

         oCtx.arc(x, y, r*0.5, iHourValue, iHourValue);

         oCtx.stroke();

         //画分针

         oCtx.lineWidth = 2;

         oCtx.beginPath();

         oCtx.moveTo(x, y);

         oCtx.arc(x, y, r*0.8, iMinValue, iMinValue);

         oCtx.stroke();

         //画秒针

         oCtx.lineWidth = 1;

         oCtx.beginPath();

         oCtx.moveTo(x, y);

         oCtx.arc(x, y, r*0.9, iSecValue, iSecValue);

         oCtx.stroke();

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas1" width="400" height="400">Hey,guys!您的浏览器版本也太低了吧，赶紧升级下吧，推荐Google Chrome哦！</canvas>

 </body>

 <html>

欢迎拍砖，如果bug, 请留言提醒， 觉得好帮忙点下 推荐哦~~--------------------------------------------------------------------------------------------------------------------------------------------↓

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓

轻松实现HTML5时钟（分享下自己对canvas的理解，原来没你想像的那么难哦）的更多相关文章

  1. 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）

    hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...

  2. 分享下对JAVA程序员成长之路的总结<转>

    我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,手痒来给新人分享下从新手成长为老鸟的已见.   首先初识语法的阶段,必须要学会怎么操作对象,操作if和for,操作list set ...

  3. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  4. 【转载】分享下多年积累的对JAVA程序员成长之路的总结

    注:该文是从百度贴吧转载过来,之前看到觉得写得还不错,对Java开发学习者来说很有意义的,可以看看. 我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,不爱玩社交网站,不爱玩微博, ...

  5. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

  6. 分享下多年积累的对JAVA程序员成长之路的总结

    http://blog.csdn.net/zhongzelin/article/details/8643269我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,不爱玩社交网站,不爱 ...

  7. 14款形态各异的超时尚HTML5时钟动画

    14款超时尚的HTML5时钟动画(附源码)   时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...

  8. CSS3学习之分享下transition属性

    最近在网上看到很多transition写的效果,借鉴http://www.w3school.com.cn分享下代码, 1.语法:transition: property duration timing ...

  9. 用hoverclock插件实现HTML5时钟

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

随机推荐

  1. HTML5简介、视频

    HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独 ...

  2. 动态编译添加php模块

    注意:转载请注明出处:http://www.programfish.com/blog/?p=85 在很多时候我们用linux里搭建web服务器的时候会需要编译安装php套件,而在编译安装后可能又会需要 ...

  3. Core Data入门－备用

    简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象. ...

  4. (转)centos6起/etc/syslog.conf不再有！而是/etc/rsyslog.conf代替！

    centos6起/etc/syslog.conf不再有!而是/etc/rsyslog.conf代替!

  5. 2013第46周四xml作为WS两端中间测试文件

    今天又到了11点多才开始写随笔记录,有点惭愧,加班回来到现在已经近2小时了,而我此刻才进入正题,之前的时间都跟MM聊天了,或许是单身久了,居然在个人情感方面感觉自己很out了,不想这些了,重点是回顾下 ...

  6. linux中patch命令 -p 选项

    patch命令和diff命令是linux打补丁的成对命令,diff 负责生产xxxxx.patch文件,patch命令负责将补丁打到要修改的源码上.但是patch命令的参数-p很容易使人迷惑,因为对- ...

  7. shell编程笔记（1）

    shell编程: 编译器,解释器 编程语言:机器语言.汇编语言.高级语言 静态语言:编译型语言    强类型(变量)    事先转换成可执行格式    C.C++.JAVA.C#           ...

  8. C基础知识小总结（十）

                  "如有不正确之处,请指出,谢谢"    --Mood   <指针和函数> 指针函数   函数指针 <最基本的使用函数指针>   ...

  9. HttpServletRequest对象请求转发和HttpServletResponse对象请求重定向之间的区别

    HttpServletRequest对象request代表浏览器请求对象,HttpServletResponse对象代表服务器响应对象,当用浏览器访问web服务器,发出请求时,Servlet调用ser ...

  10. ie6+7+8等对background-color:rgba(),background-img渐变的兼容

    一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...