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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
基于vue.js实现的分页
Mar 13 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JS中表单的使用小结
2014/01/11 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue接口请求加密实例
2020/08/11 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
安全检查管理制度
2014/02/02 职场文书
六年级学生评语大全
2014/12/26 职场文书
美容院员工规章制度
2015/08/05 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫