canvas 绘制圆形时钟


Posted in Javascript onFebruary 22, 2017

效果如下:

canvas 绘制圆形时钟

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <title>canvas clock</title>
 <style type="text/css">
 div{
 text-align: center;
 margin-top: 250px;
 }
 #clock{
 border: 1px solid #ccc;
 }
 </style>
 </head>
 <body>
 <div>
 <canvas id="clock" height="200px" width="200px"></canvas>
 </div>
 <script type="text/javascript">
 var dom=document.getElementById("clock");
   var ctx=dom.getContext("2d");
var width=ctx.canvas.width;
var heigth=ctx.canvas.height;
var r=width/2;
//描绘时分秒小数和小数点
function drawBackground(){
 ctx.save();
 ctx.translate(r,r); //中心原点位置
 ctx.beginPath(); //起始位置
 ctx.lineWidth=10;
 //圆
 ctx.arc(0,0,r-5,0,2*Math.PI,false);
 ctx.stroke();
 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
 ctx.font="18px Arial";
 ctx.textAlign="center";
 ctx.textBaseline="middle";
 hourNumbers.forEach(function(number,i){
 var rad=2*Math.PI/12*i;
 var x=Math.cos(rad)*(r-30);
 var y=Math.sin(rad)*(r-30);
 ctx.fillText(number,x,y);
 });
 for (var i=0;i<60;i++) {
 var rad=2*Math.PI/60*i;
 var x=Math.cos(rad)*(r-18);
 var y=Math.sin(rad)*(r-18);
 ctx.beginPath();
 if(i%5===0){
 ctx.fillStyle="#000";
 ctx.arc(x,y,2,2*Math.PI,false);
 }else{
 ctx.fillStyle="#ccc";
 ctx.arc(x,y,2,2*Math.PI,false);
 }
 ctx.fill();
 }
}
//描绘时针
function drawHour(hour,minute){
 ctx.save();
 ctx.beginPath();
 var rad=2*Math.PI / 12 * hour;
 var mrad=2*Math.PI / 12 / 60 * minute;
 ctx.rotate(rad + mrad);
 ctx.lineWidth=6;
 ctx.lineCap="round";
 ctx.moveTo(0,10);
 ctx.lineTo(0,-r/2);
 ctx.stroke();
 ctx.restore();
}
//描绘分针
function drawMinute(minute){
 ctx.save();
 ctx.beginPath();
 var rad=2*Math.PI/60*minute;
 ctx.rotate(rad); 
 ctx.lineWidth=3;
 ctx.lineCap="round";
 ctx.moveTo(0,10);
 ctx.lineTo(0,-r+30);
 ctx.stroke();
 ctx.restore();
}
//描绘秒针
function drawSecond(second){
 ctx.save();
 ctx.beginPath();
 ctx.fillStyle="#C14543";
 var rad=2*Math.PI/60*second;
 ctx.rotate(rad);
 ctx.moveTo(-2,20);
 ctx.lineTo(2,20);
 ctx.lineTo(1,-r+18);
 ctx.lineTo(-1,-r+18)
 ctx.fill();
 ctx.restore(); 
}
//中间固定园点
function drawDot(){
 ctx.beginPath();
 ctx.fillStyle="#fff";
 ctx.arc(0,0,3,0,2*Math.PI,false);
 ctx.fill();
}
function draw(){
 ctx.clearRect(0,0,width,heigth);
 var now=new Date();
 var hour=now.getHours();
 var minute=now.getMinutes();
 var second=now.getSeconds();
 drawBackground();
 drawHour(hour,minute);
 drawMinute(minute);
 drawSecond(second);
 drawDot();
 ctx.restore();
}
draw();
setInterval(draw,1000)
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
Javascript浅谈之this
Dec 17 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP中读写文件实现代码
2011/10/20 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php头像上传预览实例代码
2017/05/02 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python实现视频下载功能
2017/03/14 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
安全标准化实施方案
2014/02/20 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
药剂专业求职信
2014/06/20 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
鸡毛信观后感
2015/06/11 职场文书