canvas绘制表盘时钟
更新时间：2017年01月23日 10:21:56 作者：艾瑞卡
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
前进后退实现的前提是：images文件夹下图片的命名是从1~5.jpg有规律的，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
这篇文章主要介绍了用Fundebug插件记录网络请求异常的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了ionic3 懒加载的相关资料,需要的朋友可以参考下2017-08-08
多行输入框组件是原生组件,这篇文章主要给大家介绍了关于微信小程序输入多行文本的相关资料,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下2022-03-03
js getBoundingClientRect() 来获取页面元素的位置
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。2010-11-11
大家注意看下，感觉应该是批量给网页的一些标签加样式的函数。2009-05-05
一种JavaScript的设计模式...2006-11-11
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
这篇文章主要介绍了bootstrap table 表格中增加下拉菜单末行出现滚动条的解决方法,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了微信小程序实现折叠展开效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了如何使用JavaScript实现多文件拖动上传功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
最新评论