最丑的时钟效果！js canvas时钟制作方法
更新时间：2016年08月15日 08:51:15 作者：小数点就是问题
最丑的时钟效果，这篇文章主要为大家详细介绍了js canvas时钟制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今日就发个丑丑的时钟，老实说
有没有什么调试canvas的工具，老是要在浏览器刷新查看效果，好累啊~
（┬＿┬）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #eee;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas width="800" height="800">你浏览器不支持，请升级...</canvas>
<audio id="audio" src="1.wav"></audio>
<script>
var oAudio=document.getElementById("audio");
var oCas=document.getElementsByTagName("canvas")[0];
var cas=oCas.getContext("2d");
oAudio.ontimeupdate=function(){
if(oAudio.currentTime>0.1){
this.pause();
}
}
/*渐变颜色*/
var color=cas.createRadialGradient(400,400,10,400,400,200);
color.addColorStop(0,"#f1f4f5");
color.addColorStop(1,"#c5c6c7");
setInterval(function(){
oAudio.currentTime=0;
oAudio.play();
cas.clearRect(0,0,800,800);
/*画圆框*/
cas.lineWidth=3;
cas.shadowColor="#888";
cas.shadowOffsetX=1;
cas.shadowOddsetY=1;
cas.shadowBlur=5;
cas.arc(400,400,200,0,Math.PI*2,false);
cas.strokeStyle=color;
cas.stroke();
/*画圆内*/
cas.fillStyle=color;
cas.fill();
/*画时刻*/
drawTime();
function drawTime(){
var len=8;
var len1=16;
cas.strokeStyle="#7f7f7f";
cas.shadowOffsetX=0;
cas.shadowOddsetY=0;
cas.shadowBlur=0;
cas.beginPath();
for(var i=0;i<60;i++){
if(i%5==0){
cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180));
}else{
cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180));
}
}
cas.stroke();
}
/*画时针*/
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
/*时针*/
needle(h*5+5*m/60,100,"#579ec5");
/*分针*/
needle(m,130,"#5e717c");
/*秒针*/
needle(s,150,"#1d1e1e");
/*圆的中心点*/
cas.fillStyle="#858384";
cas.beginPath();
cas.arc(400,400,5,0,2*Math.PI,true);
cas.shadowOffsetX=1;
cas.shadowOddsetY=1;
cas.shadowBlur=5;
cas.fill();
},1000);
/*时针的函数*/
function needle(t,len,color){
var angle=Math.PI/180;
cas.beginPath();
cas.strokeStyle=color;
cas.moveTo(400,400);
cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle));
cas.stroke();
}
</script>
</body>
</html>
这个钟重点不在怎么画，在三角函数，三角函数的使用与角度息息相关，Math.PI是π，Math.sin(),Math.cos()它们都是接受弧度的，所以要
把角度转换成弧度，在画钟前要先判断时钟的条件，把圆分成60份，每一份代表一个刻度，还有在圆的坐标是数学里的正方向为准的，所以
需要把开始坐标调一下，减个90度就可以和时钟的开始位置一样了。
在学canvas前一定要把以前遗忘的数学函数复习复习一下，不是一些复杂的算数就无法做了，canvas的学习就是坐标的不断确认的，然后连成线
最后画成图，这与数学里的点到线，线到面一样的道理。
上面的代码不难都是使用线条画的，就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用，达到时钟的声音 滴答滴答滴答~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文为大家准备了五个基于HTML+CSS+JS实现的酷炫登录页面的示例代码，文中的页面效果都很好看，需要的小伙伴可以参考一下2022-04-04
在使用小程序的过程中,在编辑个人资料时,通常会面临上传头像、上传背景图片的情况,而这个开发过程需要怎样实现呢?这篇文章主要给大家介绍了关于微信小程序实现云开发上传文件、图片功能的相关资料,需要的朋友可以参考下2022-12-12
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
本文结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对bootstrap表格组件相关知识感兴趣的朋友一起学习吧2016-05-05
Bootstrap Table 双击、单击行获取该行及全表内容
这篇文章主要介绍了Bootstrap Table 双击、单击行获取该行内容及获取全表的内容,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
本文为大家介绍下如何改变隐藏的input中value的值，一句代码就可以实现，感性的朋友可以参考下2013-12-12
留言板的主要使用场景是为用户提供一个在网站或应用上留言的平台,本文主要为大家介绍了四个常见的前端实现留言板功能的方法,希望对大家有所帮助2023-11-11
模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。2021-05-05
javascript ready和load事件的区别示例介绍
ready是在DOM加载完成就触发；load是在加载完所有页面内容才会触发，下为大家简要介绍下，不知道的朋友可以参考下2013-08-08
本文主要分享了js实现文字选中分享功能的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
JavaScript MutationObserver实例讲解
MutationObserver用来监视DOM变动。DOM的任何变动，比如节点增减、属性的变动、文本内容的变动都会触发MutationObserver事件，它与事件有一个本质不同：事件是同步触发，MutationObserver则是异步触发，DOM的变动并不会马上触发，而是要等到当前所有DOM操作都结束才触发2022-12-12
最新评论