Drawing Clock

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title> Canvas Clock drawing Demo </ title>
  <style>
  #myCanvas{
  border: 1px solid;
  }
  </style>
  </head>
  <body>
  <canvas id="myCanvas" width="500" height="400">
  Sorry, your browser does not support the canvas element
  </canvas>
  <script>
  var c = document.getElementById ( 'myCanvas'); // Get Object Canvas
  var ctx = c.getContext ( '2d'); // get the context
  function drawClock()
  {
  ctx.clearRect (0,0, c.width, c.height); // Clear canvas
  c.width = c.width; // needs to be reset when the clear width of the canvas, or there will be an overlap canvas
  var x = 250, y = 200, r = 180; // definition of the center coordinates of the disk and the disk radius
  / * Get real time * /
  var objTime = new Date();
  was objHour objTime.getHours = ();
  was objMin objTime.getMinutes = ();
  was objSen objTime.getSeconds = ();
  / * Convert radians specific time * /
  /*
  * Since the clock is counted from a start position of 12 o'clock, but the canvas is counted as 3 o'clock position of 0 degree, -90 degrees, so that the direction points to twelve
  * Hour is 30 degrees per hour apart, objMin / 2 in order to make more than half when the minute hand, the hour hand is between a corresponding two hours
  * Per minute and second hands are separated by 6 degrees
  */
  var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
  was arcmin = (-90 + objMin * 6) * Math.PI / 180;
  There arcs An = (-90 + OBJS the * 6) * Math.PI / 180;
  / * * Draw disc /
  ctx.beginPath ();
  for (var i = 0; i <60; i ++) // a total of 360 degrees, a total of 60 minutes, separated by 6 degrees per minute, 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();
  / * Draw white plate covering the lower line * /
  ctx.fillStyle = 'white';
  ctx.beginPath ();
  ctx.arc (x, y, r * 19 / 20,0,360 * Math.PI / 180, false); // value of the radius r of 20 19 per
  ctx.closePath();
  ctx.fill();
  / * Yihuhuhuapiao produced every hour line * /
  / * * Draw disc /
  ctx.beginPath ();
  ctx.lineWidth = 3;
  for (var i = 0; i <12; i ++) // a total of 360 degrees, a total of 12 hours apart, 30 degrees per hour, 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();
  / * Draw white plate covering the lower line * /
  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>

Guess you like

Origin www.cnblogs.com/qilin0/p/11512314.html