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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
javascript常用功能汇总
Jul 05 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
几种显示数据的方法的比较
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
php实现数字补零的方法总结
2018/09/12 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python基础学习之常见的内建函数整理
2017/09/06 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python调试神器PySnooper的使用
2019/07/03 Python
python操作cfg配置文件方式
2019/12/22 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python 读取位于包中的数据文件
2020/08/07 Python
python空元组在all中返回结果详解
2020/12/15 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
教师实习自我鉴定
2013/12/18 职场文书
外贸业务员工作职责
2014/01/06 职场文书
和解协议书
2014/04/16 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书