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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
详解处理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
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python调用Delphi写的Dll代码示例
2017/12/05 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
在django中自定义字段Field详解
2019/12/03 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
如何进行Linux分区优化
2016/09/13 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
通信生自我鉴定
2014/01/18 职场文书
经理任命书模板
2014/06/06 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python