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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 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常用的安全过滤函数集锦
2014/10/09 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python设计实现的计算器功能完整实例
2017/08/18 Python
python的unittest测试类代码实例
2017/12/07 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
opencv与numpy的图像基本操作
2019/03/08 Python
pytorch forward两个参数实例
2020/01/17 Python
如何通过命令行进入python
2020/07/06 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
南京某公司笔试题
2013/01/27 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
材料员岗位职责
2014/03/13 职场文书
安全标语大全
2014/06/10 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
MySQL常见优化方案汇总
2022/01/18 MySQL