canvas仿iwatch时钟效果


Posted in Javascript onMarch 06, 2017

效果图:

canvas仿iwatch时钟效果

图(1)

canvas仿iwatch时钟效果

图(2)

代码如下:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
*{margin:0; padding:0;}
body{ background:#000; text-align:center;}
canvas{ background:#fff;}
</style>
<script>
function toDou(iNum){
 return iNum<10?'0'+iNum:''+iNum;
}
function d2a(n){
 return n*Math.PI/180;
}
window.onload = function(){
 var oC = document.getElementById('c1');
 var gd = oC.getContext('2d');
 var cx = oC.width/2,
 cy = oC.height/2;
 function clock(){
 gd.clearRect(0,0,oC.width,oC.height);
 var oDate = new Date();
 var H = oDate.getHours()%12;
 var M = oDate.getMinutes();
 var S = oDate.getSeconds();
 var MS = oDate.getMilliseconds();
 drawArc(60,0,(H*30+M/60*30),'orange');
 drawArc(80,0,(M*6+S/60*6),'purple');
 drawArc(100,0,(S*6+MS/1000*6),'aqua');
 var str = toDou(H)+':'+toDou(M)+':'+toDou(S);
 gd.font = '20px 微软雅黑';
 gd.textAlign = 'center';
 gd.textBaseline = 'middle';
 gd.fillText(str,cx,cy);
 }
 clock()
 setInterval(clock,1);
 function drawArc(r,s,e,color){
 color = color||'black';
 gd.beginPath();
 gd.arc(cx,cy,r,d2a(s-90),d2a(e-90),false);
 gd.strokeStyle = color;
 gd.lineWidth = 20;
 gd.stroke();
 }
};
</script>
</head>
<body>
 <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
You might like
输出控制类
2006/10/09 PHP
学习php分页代码实例
2013/10/24 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python发送告警邮件脚本
2018/09/17 Python
python print出共轭复数的方法详解
2019/06/25 Python
Python占用的内存优化教程
2019/07/28 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
校运会广播稿100字
2014/01/27 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
董事长新年致辞
2015/07/29 职场文书
2016年记者节感言
2015/12/08 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL