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 相关文章推荐
JavaScript中几种常见排序算法小结
Feb 22 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
vue elementUI表格控制对应列
Apr 13 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
文明班级申报材料
2014/12/24 职场文书
心得体会格式及范文
2016/01/25 职场文书
股权投资协议书
2016/03/23 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL