canvas实现钟表效果


Posted in Javascript onFebruary 13, 2017

效果如下:

canvas实现钟表效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas画钟表</title>
 <style>
 body{
 background: #fc0;
 }
 #canvas1{
 background: #fff;
 }
 </style>
 </head>
 <body>
 <canvas id="canvas1" width="400" height="400"></canvas>
 <script>
 var oC=document.getElementById('canvas1');
 var oGC=oC.getContext('2d');
 function toDraw(){
 var x=200;
 var y=200;
 var r=150;
 oGC.clearRect(0,0,oC.width,oC.height);
 var oDate=new Date();
 var oHour=oDate.getHours();
 var oMinu=oDate.getMinutes();
 var oSec=oDate.getSeconds();
 var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;
 var mVal=(-90+oMinu*6)*Math.PI/180;
 var sVal=(-90+oSec*6)*Math.PI/180;
 oGC.beginPath();
 for(i=0;i<60;i++){
 oGC.moveTo(x,y);
 oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
 }
 oGC.closePath();
 oGC.stroke();
 oGC.fillStyle='#fff';
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
 oGC.closePath();
 oGC.fill();
 oGC.lineWidth=3;
 oGC.beginPath();
 for(i=0;i<12;i++){
 oGC.moveTo(x,y);
 oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
 }
 oGC.closePath();
 oGC.stroke();
 oGC.fillStyle='#fff';
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
 oGC.closePath();
 oGC.fill();
 oGC.lineWidth=5;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*10/20,hVal,hVal,false);
 oGC.closePath();
 oGC.stroke();
 oGC.lineWidth=3;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*14/20,mVal,mVal,false);
 oGC.closePath();
 oGC.stroke();
 oGC.lineWidth=1;
 oGC.beginPath();
 oGC.moveTo(x,y);
 oGC.arc(x,y,r*17/20,sVal,sVal,false);
 oGC.closePath();
 oGC.stroke();
 }
 setInterval(toDraw,1000);
 toDraw();
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
javascript常用的正则表达式实例
May 15 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
深入理解Javascript箭头函数中的this
Feb 13 #Javascript
ES6学习之变量的解构赋值
Feb 12 #Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
You might like
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php 基础函数
2017/02/10 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
Puppet的一些技巧
2018/09/17 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python制作词云的方法
2018/01/03 Python
Python装饰器语法糖
2019/01/02 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
JDO的含义
2012/11/17 面试题
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
2014年食堂工作总结
2014/11/20 职场文书
情人节活动总结范文
2015/02/05 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python