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自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
深入理解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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
PHP中include()与require()的区别说明
2010/03/10 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
JS实现瀑布流布局
2017/10/21 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
js实现每日签到功能
2018/11/29 Javascript
js实现打字小游戏
2019/12/17 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
解析Python中的异常处理
2015/04/28 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
中专自我鉴定范文
2013/10/16 职场文书
应征英语教师求职信
2013/11/27 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
节能环保标语
2014/06/12 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
国贸专业求职信
2014/06/28 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript