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 indexOf使用方法
Aug 19 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
JavaScript原型对象原理与应用分析
Dec 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 PDO简单教程
2019/05/28 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python打开网页和暂停实例
2014/09/30 Python
深入解析Python中的urllib2模块
2015/11/13 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
军训心得体会
2013/12/31 职场文书
担保书怎么写
2014/04/01 职场文书
淘宝店策划方案
2014/06/07 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js