Use the knowledge:
1. Get the system time
2. Draw graphics, graphic hollow, solid graphics, and a number of other properties
3. for loop
Preparation:
a. HTML prepared in a container storage canvas, and set width, height.
<canvas id="myCanvas" width="500" height="400"></canvas>
. B acquires the js canvas canvas element, and obtain the context corresponding to the following methods:
var c = document.getElementById ( 'myCanvas' ); // Get the Canvas
var ctx = c.getContext ( '2d' ); // get the context
code show as below:
<!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" >
Sorry, your browser does not support the canvas element
</ canvas >
< Script >
var c = document.getElementById ( ' myCanvas ' ); // get the Canvas object
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 width of the canvas cleared, otherwise there will be a canvas overlap
var X = 250 , Y = 200 is , R & lt = 180 [ ; // a radius of the disk and define the center coordinates disk
/ * get the actual time * /
var objTime = new new a Date ();
var objHour = objTime.getHours () ;
var objMin = objTime.getMinutes ();
var objSen = objTime.getSeconds ();
/ * converting radians specific time * /
/ *
* since the clock is counted from a start position of 12 o'clock, but the canvas is 3:00 position of the clock counted as 0 degrees, -90 degrees direction pointing 12:00
* are separated by 30 degrees per hour hour, objMin / 2 when the minute hand is to make when more than half of the clock 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 [ ;
var arcmin = ( - 90 + objMin * . 6 ) * Math.PI / 180 [;
var arcSen = ( - 90 + objSen * . 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 & lt, . 6 * I * Math.PI / 180,6 * (I +. 1) Math.PI * / 180 [ , to 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 [ , to false ); // a radius of r value of 20 19 parts per
ctx.closePath ();
CTX .fill ();
/ * Yihuhuhuapiao produced every hour line * /
/ * draw disc * /
ctx.beginPath ();
ctx.lineWidth = . 3 ;
for ( var I = 0 ; I < 12 is ; I ++ {) // a total of 360 degrees, a total of 12 hours apart, 30 degrees per hour, 360/30 = 12 is
ctx.moveTo (X, Y);
ctx.arc (X, Y, R & lt, 30 * I * Math.PI / * 180,30 (I +. 1) Math.PI * / 180 [ , to false );
}
ctx.closePath ();
ctx.stroke ();
/ * line drawing below the white plate covers * /
ctx.fillStyle = ' white ' ;
ctx.beginPath ();
ctx.arc (X, Y, R & lt * 18 is / 20,0,360 Math.PI * / 180 [ , to false ); // a radius value of 20 parts per 18 r
ctx.closePath ();
ctx.fill ();
/ * start drawing the hour and minute hands and second hands, skill is the same as the start and end of the arc radians * /
/ * begin drawing the hour * /
ctx.beginPath ();
ctx.moveTo ( X, Y);
ctx.lineWidth = . 7 ;
ctx.lineCap = ' round ' ;
ctx.arc (X, Y, r * 10 / 20, arcHour, arcHour, to false); // a radius of r value is 20 minutes the 10
ctx.stroke ();
ctx.closePath ();
/ * start drawing minute * /
ctx.moveTo (X, Y);
ctx.beginPath ();
ctx.lineWidth = . 5 ;
ctx.lineCap = ' round ' ;
ctx.arc (X, Y, r * 12 is / 20, arcmin, arcmin, to false); // a radius r from the value 20 12 per
ctx.stroke ();
ctx.closePath ();
/ * start drawing seconds * /
ctx.beginPath ();
ctx.moveTo (X, Y);
ctx.lineWidth = 2 ;
ctx.lineCap = ' round ' ;
ctx.arc (X, Y, R & lt *16 / 20 is, arcSen, arcSen, to false); // a radius r value of 2016 ppm of
ctx.stroke ();
ctx.closePath ();
}
the setInterval ( ' drawClock () ' , 1000 ); // every draw call of 1 second clock function
</ Script >
</ body >
</ HTML >
Static renderings:
