使用纯HTML5编写一款网页上的时钟的代码分享


Posted in HTML / CSS onNovember 16, 2015

你需要知道的:

canvas标签只是图形容器,您必须使用脚本来绘制图形。默认大小:宽300px,高150px;

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

fillRect(l,t,w,h):默认颜色是黑色 strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath()
方法会被显式地调用。
closePath():结束绘制路径(将起点与终点进行连接)

 绘制圆形:
arc( x,y,半径,起始弧度,结束弧度,旋转方向)
x,y:起始位置
弧度与角度的关系:弧度=角度*Math.PI/180
旋转方向:顺时针(默认:false,逆时针:true)

代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <script>  
  7.                 window.onload = function(){   
  8.                         var oC = document.getElementById('ch1');   
  9.                         var oGC = oC.getContext('2d');   
  10.   
  11.                         function drawClock(){   
  12.                                 var x = 200;   //指定坐标   
  13.                                 var y = 200;   
  14.                                 var r = 150;  //指定钟表半径   
  15.   
  16.                                 oGC.clearRect(0,0,oC.width,oC.height);//清空画布   
  17.   
  18.                                 var oDate = new Date();      //创建日期对象   
  19.                                 var oHours = oDate.getHours();//获取时间   
  20.                                 var oMin = oDate.getMinutes();   
  21.                                 var oSen = oDate.getSeconds();   
  22.   
  23.                                 var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值   
  24.                                 var oMinValue = (-90 + oMin*6)*Math.PI/180;   
  25.                                 var oSenValue = (-90 + oSen*6)*Math.PI/180;   
  26.   
  27.                                 oGC.beginPath();//开始   
  28.   
  29.                                 for(var i=0;i<60;i++){         //i为60,代表着时钟的60个小刻度   
  30.                                         oGC.moveTo(x,y);   
  31.                                         oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度   
  32.                                 }   
  33.                                 oGC.closePath();   
  34.                                 oGC.stroke();   
  35.   
  36.                                 oGC.fillStyle ='white'; //覆盖住小刻度的黑色线   
  37.                                 oGC.beginPath();   
  38.                                 oGC.moveTo(x,y);   
  39.                                 oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);   
  40.   
  41.                                 oGC.closePath();//结束   
  42.                                 oGC.fill();   
  43.   
  44.                                 oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值   
  45.                                 oGC.beginPath();  //开始画大的时钟刻度   
  46.   
  47.                                 for(i=0;i<12;i++){              //i为12,代表着时钟刻度的12大格   
  48.                                         oGC.moveTo(x,y);   
  49.                                         oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); // 间隔为30度,弧度=角度*Math.PI/180   
  50.                                 }   
  51.                                 oGC.closePath();   
  52.                                 oGC.stroke();   
  53.   
  54.                                 oGC.fillStyle ='white'; //覆盖住大刻度的黑色线   
  55.                                 oGC.beginPath();   
  56.                                 oGC.moveTo(x,y);   
  57.                                 oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false);   
  58.   
  59.                                 oGC.closePath();   
  60.                                 oGC.fill();//表盘完成    
  61.   
  62.                                 oGC.lineWidth = 5;//设置时针宽度   
  63.                                 oGC.beginPath();//开始绘制时针   
  64.                                 oGC.moveTo(x,y);   
  65.   
  66.                                 oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针大小和弧度   
  67.                                 oGC.closePath();   
  68.                                 oGC.stroke();   
  69.   
  70.                                 oGC.lineWidth = 3;//设置分针宽度   
  71.                                 oGC.beginPath();//开始绘制分针   
  72.                                 oGC.moveTo(x,y);   
  73.   
  74.                                 oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针大小和弧度   
  75.                                 oGC.closePath();   
  76.                                 oGC.stroke();   
  77.   
  78.                                 oGC.lineWidth = 1;//设置秒针宽度   
  79.                                 oGC.beginPath();//开始绘制秒针   
  80.                                 oGC.moveTo(x,y);   
  81.   
  82.                                 oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针大小和弧度   
  83.                                 oGC.closePath();   
  84.                                 oGC.stroke();   
  85.                         }   
  86.                         setInterval(drawClock,1000);//设置定时器,让时钟运转起来   
  87.                                 drawClock();   
  88.                 };   
  89.         </script>  
  90. </head>  
  91. <body>  
  92.         <canvas id = "ch1" width = "400px" height = "400px"></canvas>  
  93. </body>  
  94. </html>  

点击下方result查看演示:
http://jsfiddle.net/eh02450b/2/

HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 #HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 #HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 #HTML / CSS
简单的HTML5初步入门教程
Sep 29 #HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 #HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 #HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 #HTML / CSS
You might like
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python中IPYTHON入门实例
2015/05/11 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
大学活动总结格式
2014/04/29 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
个人授权委托书
2014/09/15 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
python基于opencv批量生成验证码的示例
2021/04/28 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL