绘制时钟

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Canvas绘制时钟Demo</title>
  <style>
  #myCanvas{
  border: 1px solid;
  }
  </style>
  </head>
  <body>
  <canvas id="myCanvas" width="500" height="400">
  很抱歉,你的浏览器不支持canvas元素
  </canvas>
  <script>
  var c = document.getElementById('myCanvas');//获取Canvas对象
  var ctx = c.getContext('2d');//获取上下文
  function drawClock()
  {
  ctx.clearRect(0,0, c.width, c.height);//清除画布
  c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
  var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
  /*获取实际的时间*/
  var objTime = new Date();
  var objHour = objTime.getHours();
  var objMin = objTime.getMinutes();
  var objSen = objTime.getSeconds();
  /*将时间转换为具体的弧度*/
  /*
  * 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
  * 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
  * 分针和秒针是每次相隔6度
  */
  var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
  var arcMin = (-90+objMin*6)*Math.PI/180;
  var arcSen = (-90+objSen*6)*Math.PI/180;
  /*绘制圆盘*/
  ctx.beginPath();
  for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
  {
  ctx.moveTo(x,y);
  ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
  }
  ctx.closePath();
  ctx.stroke();
  /*绘制白盘盖住下面的线*/
  ctx.fillStyle = 'white';
  ctx.beginPath();
  ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19
  ctx.closePath();
  ctx.fill();
  /*依葫芦画瓢,制作每一个小时的线*/
  /*绘制圆盘*/
  ctx.beginPath();
  ctx.lineWidth = 3;
  for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
  {
  ctx.moveTo(x,y);
  ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
  }
  ctx.closePath();
  ctx.stroke();
  /*绘制白盘盖住下面的线*/
  ctx.fillStyle = 'white';
  ctx.beginPath();
  ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18
  ctx.closePath();
  ctx.fill();
  /*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/
  /*开始绘制时针*/
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineWidth = 7;
  ctx.lineCap = 'round';
  ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
  ctx.stroke();
  ctx.closePath();
  /*开始绘制分针*/
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
  ctx.stroke();
  ctx.closePath();
  /*开始绘制秒针*/
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
  ctx.stroke();
  ctx.closePath();
  }
  setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数
  </script>
  </body>
  </html>
posted @ 2019-09-12 15:53  小样Q  阅读(324)  评论(0)    收藏  举报