最丑的时钟效果!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 相关文章推荐
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 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
PHP新手上路(五)
2006/10/09 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
Python开发常用的一些开源Package分享
2015/02/14 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
python time()的实例用法
2020/11/03 Python
用Python 执行cmd命令
2020/12/18 Python
大四自我鉴定范文
2013/10/06 职场文书
英文自荐信
2013/12/15 职场文书
大学老师推荐信
2014/02/25 职场文书
小学语文课后反思精选
2014/04/25 职场文书
体操比赛口号
2014/06/10 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
Python基础之进程详解
2021/05/21 Python
pytorch 如何使用float64训练
2021/05/24 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis