最丑的时钟效果!js canvas时钟制作方法


Posted in Javascript onAugust 15, 2016

今日就发个丑丑的时钟,老实说 

有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~
 (┬_┬)

最丑的时钟效果!js 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的学习就是坐标的不断确认的,然后连成线 

最后画成图,这与数学里的点到线,线到面一样的道理。 

上面的代码不难都是使用线条画的,就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用,达到时钟的声音    滴答滴答滴答~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取当前路径的简单示例代码
Jan 08 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
javascript常用的方法整理
Aug 20 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
深入分析javascript中console命令
Aug 14 #Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
javascript中的 object 和 function小结
Aug 14 #Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 #Javascript
You might like
3款值得推荐的微信开发开源框架
2014/10/28 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python decimal模块使用方法详解
2020/06/08 Python
浅析Python 多行匹配模式
2020/07/24 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
存储过程和sql语句的优缺点
2014/07/02 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
2014年共青团工作总结
2014/12/10 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
python中pycryto实现数据加密
2022/04/29 Python
Moment的feature导致线上bug解决分析
2022/09/23 Javascript