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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
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
php学习之 认清变量的作用范围
2010/01/26 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python中append函数用法讲解
2020/12/11 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
幼儿教师培训感言
2014/03/08 职场文书
抽奖活动主持词
2014/03/31 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大学生党性分析材料
2014/12/19 职场文书
美丽心灵观后感
2015/06/01 职场文书
欢送会主持词
2015/07/01 职场文书
行为习惯主题班会
2015/08/14 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python