canvas实现钟表效果


Posted in Javascript onFebruary 13, 2017

效果如下:

canvas实现钟表效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas画钟表</title>
 <style>
 body{
 background: #fc0;
 }
 #canvas1{
 background: #fff;
 }
 </style>
 </head>
 <body>
 <canvas id="canvas1" width="400" height="400"></canvas>
 <script>
 var oC=document.getElementById('canvas1');
 var oGC=oC.getContext('2d');
 function toDraw(){
 var x=200;
 var y=200;
 var r=150;
 oGC.clearRect(0,0,oC.width,oC.height);
 var oDate=new Date();
 var oHour=oDate.getHours();
 var oMinu=oDate.getMinutes();
 var oSec=oDate.getSeconds();
 var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;
 var mVal=(-90+oMinu*6)*Math.PI/180;
 var sVal=(-90+oSec*6)*Math.PI/180;
 oGC.beginPath();
 for(i=0;i<60;i++){
 oGC.moveTo(x,y);
 oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
 }
 oGC.closePath();
 oGC.stroke();
 oGC.fillStyle='#fff';
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
 oGC.closePath();
 oGC.fill();
 oGC.lineWidth=3;
 oGC.beginPath();
 for(i=0;i<12;i++){
 oGC.moveTo(x,y);
 oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
 }
 oGC.closePath();
 oGC.stroke();
 oGC.fillStyle='#fff';
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
 oGC.closePath();
 oGC.fill();
 oGC.lineWidth=5;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*10/20,hVal,hVal,false);
 oGC.closePath();
 oGC.stroke();
 oGC.lineWidth=3;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*14/20,mVal,mVal,false);
 oGC.closePath();
 oGC.stroke();
 oGC.lineWidth=1;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*17/20,sVal,sVal,false);
 oGC.closePath();
 oGC.stroke();
 }
 setInterval(toDraw,1000);
 toDraw();
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
javascript文本模板用法实例
Jul 31 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
深入理解Javascript箭头函数中的this
Feb 13 #Javascript
ES6学习之变量的解构赋值
Feb 12 #Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
You might like
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
yii中widget的用法
2014/12/03 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
javascript折半查找详解
2015/01/26 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
学习Vue组件实例
2018/04/28 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
js实现滚动条自动滚动
2020/12/13 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python之消除前缀重命名的方法
2018/10/21 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
对孩子的寄语
2014/04/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
领导干部作风建设总结
2014/10/23 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
任命书标准格式
2015/03/02 职场文书
小学运动会通讯稿
2015/07/18 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
手残删除python之后的补救方法
2021/06/26 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python