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通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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
php xfocus防注入资料
2008/04/27 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
pandas实现导出数据的四种方式
2020/12/13 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
中文系师范生自荐信
2013/10/01 职场文书
年级组长自我鉴定
2014/02/22 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
工作保证书
2015/01/17 职场文书
2015年酒店工作总结
2015/04/28 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Python OpenCV之常用滤波器使用详解
2022/04/07 Python