canvas绘制表盘时钟


Posted in Javascript onJanuary 23, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>canvas绘制表盘</title>
</head>
<body>
 <canvas id='box' width="500" height="500" >
 您的浏览器不支持canvas
 </canvas>
 <script>
 var box = document.getElementById('box');
 var cxt = box.getContext('2d');
 // 时钟动起来
 var timer = null;
 function clock(){
 var date = new Date();
 var h = date.getHours();
 h = h + h/60;
 h = h>12? h-12:h;
 var m = date.getMinutes();
 var s = date.getSeconds();
 // 清画布
 cxt.clearRect(0,0,500,500); 
 // 画表盘
 cxt.strokeStyle = '#f0f';
 cxt.lineWidth = 6;
 cxt.beginPath();
 cxt.arc(250,250,100,0,2*Math.PI);
 cxt.stroke();
 // 画时钟刻度
 for(var i=0; i<12; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(30*i*Math.PI/180);
 cxt.lineWidth = 3;
 cxt.beginPath();
 cxt.moveTo(0,-80);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 //画分钟刻度
 for(var i=0; i<60; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(6*i*Math.PI/180);
 cxt.lineWidth = 2;
 cxt.beginPath();
 cxt.moveTo(0,-86);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 // 画时针
 cxt.save();
 cxt.lineWidth = 5;
 cxt.translate(250,250);
 cxt.rotate(h*30*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,6);
 cxt.lineTo(0,-40);
 cxt.stroke();
 cxt.restore();
 // 画分针
 cxt.save();
 cxt.lineWidth = 3;
 cxt.translate(250,250);
 cxt.rotate(m*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,8);
 cxt.lineTo(0,-60);
 cxt.stroke();
 cxt.restore();
 // 画秒针
 cxt.save();
 cxt.lineWidth = 1;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,10);
 cxt.lineTo(0,-75);
 cxt.stroke();
 cxt.restore();
 // 画中心的小圆固定三根针
 cxt.save();
 cxt.beginPath();
 cxt.fillStyle = '#0f0';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.arc(0,0,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 // 画秒针上的园
 cxt.save();
 cxt.fillStyle = '#f00';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.arc(0,-60,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 }
 clock();
 timer = setInterval(clock,1000);
 </script>
</body>
</html>

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

Javascript 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
js瀑布流布局的实现
Jun 28 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
canvas绘制的直线动画
Jan 23 #Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
利用JS实现简单的日期选择插件
Jan 23 #Javascript
You might like
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python爬虫的工作原理
2017/03/05 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
wxPython实现绘图小例子
2019/11/19 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
汶川大地震感悟
2015/08/10 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang