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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
php下将XML转换为数组
2010/01/01 PHP
ThinkPHP分页实例
2014/10/15 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python实现微信小程序自动回复
2018/09/10 Python
python中时间模块的基本使用教程
2019/05/14 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python判断正负数方式
2020/06/03 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
护士自我鉴定
2013/10/23 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
初二政治教学反思
2014/01/12 职场文书
师范生自我鉴定
2014/03/20 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
诉讼和解协议书
2016/03/23 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL