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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
javascript网页随机点名实现过程解析
Oct 15 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实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php实现监听事件
2013/11/06 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python如何实现守护进程的方法示例
2017/02/08 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
员工安全承诺书
2014/05/22 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js