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 相关文章推荐
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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上传图片、删除图片实现代码
2010/05/12 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
使用pycharm生成代码模板的实例
2018/05/23 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
会计专业应届生求职信
2013/11/24 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
单位证明范文
2015/06/18 职场文书
法定代表人免职证明
2015/06/24 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers