JS+H5 Canvas实现时钟效果


Posted in Javascript onJuly 20, 2018

用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下

效果图:

JS+H5 Canvas实现时钟效果

先看html代码:

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/demo3.js" ></script>
 </head>
 <body>
 <canvas id = "canvas"></canvas>
 </body>
</html>

JavaScript代码:

var canvas,context;
function draw(){//定义划时钟的方法
 var data = new Date();
 var hHoure = data.getHours();
 var mMin = data.getMinutes();
 var sSec = data.getSeconds();
 var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; 
 var mValue = (mMin*6-90)*Math.PI/180;
 var sValue = (sSec*6 -90)*Math.PI/180;
 var x = 200,y = 200,r = 150;
 
 context.clearRect(0,0,canvas.width,canvas.height);
 context.moveTo(x,y);
 context.arc(x,y,r,0,6*Math.PI/180,false);
 //
 context.beginPath();
 context.lineWidth = 1;
 for(var i = 0;i<60;i++){
 context.moveTo(x,y);
 context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
 }
 context.closePath();
 context.stroke();
 //
 context.beginPath();
 context.fillStyle = "white";
 context.moveTo(x,y);
 context.arc(x,y,r/1.1,-0,2*Math.PI,false);
 context.closePath();
 context.fill();
 // 
 context.beginPath();
 context.lineWidth = 3;
 for(var i = 0;i<12;i++){
 context.moveTo(x,y);
 context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false);
 }
 context.closePath();
 context.stroke();
 //
 context.beginPath();
 context.fillStyle = "white";
 context.moveTo(x,y);
 context.arc(x,y,r/1.12,0,2*Math.PI,false);
 context.closePath();
 context.fill();
 
 context.beginPath();
 context.fillStyle = "black";
 context.moveTo(x,y);
 context.arc(x,y,r/30,0,2*Math.PI,false);
 context.fill(); 
 //
 context.beginPath();
 context.lineWidth = 5;
 context.moveTo(x,y);
 context.arc(x,y,r/2.5,hValue,hValue,false);
 context.stroke();
 //
 context.beginPath();
 context.lineWidth = 3;
 context.moveTo(x,y);
 context.arc(x,y,r/2,mValue,mValue,false);
 context.stroke(); 
 //
 context.beginPath();
 context.lineWidth = 2;
 context.moveTo(x,y);
 context.arc(x,y,r/1.6,sValue,sValue,false);
 context.stroke();
}
window.onload = function(){
 canvas = document.getElementById('canvas');
 context = canvas.getContext('2d');
 canvas.height = 500;
 canvas.width = 500;
 setInterval(draw,1000); 
 draw(); 
}

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
发现的以前不知道的函数
2006/09/19 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python类如何定义私有变量
2020/02/03 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python列表返回重复数据的下标
2020/02/10 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
查环查孕证明
2014/01/10 职场文书
家长对孩子评语
2014/01/30 职场文书
商务英语专业求职信
2014/06/26 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
公司与个人合作协议书
2016/03/19 职场文书