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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说 今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈 然后是上代码 html部分 <canvas id="

  • JS+Canvas绘制时钟效果

    本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t

  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程 第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid

  • js Canvas绘制圆形时钟效果

    本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px

  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

  • JavaScript html5 canvas绘制时钟效果(二)

    JavaScript html5 canvas绘制时钟效果(二)

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么

  • JavaScript Canvas绘制圆形时钟效果

    JavaScript Canvas绘制圆形时钟效果

    本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0

  • js Canvas实现的日历时钟案例分享

    js Canvas实现的日历时钟案例分享

    Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTime.js">&

  • js Canvas绘制圆形时钟教程

    js Canvas绘制圆形时钟教程

    本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id="canvas" width=&

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

随机推荐