Drawing Canvas Clock Demo

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> Clock drawing the Canvas Demo </ title> 
    <style> 
        #myCanvas { 
            border: 1px Solid; 
        }
     < / style> 
</ head> 
<body> 
    <canvas the above mentioned id = "myCanvas" width = "500" height = "400"> 
        Sorry, your browser does not support the canvas element
     </ canvas> 
    <Script> var c = the Document .getElementById ( 'myCanvas'); // Get the Canvas var CTX = c.getContext ( '2D');// Get context function drawClock () 
        { 
            ctx.clearRect ( 0,0, c.width, c.height);
        
        
        // clear the canvas coordinate y coordinates of the rectangle length x width of the rectangle 
            c.width = c.width; // needs to be reset when the clear width of the canvas, or there will be a canvas overlap 
            var x = 250, y = 200 is, = 180 [R & lt; // radius and center coordinates of the disc definition of 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 counted as 3 o'clock position 0 degrees, -90 degrees to point 12:00 direction
             * clockwise 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 * 30 + objMin objHour / 2) * Math.PI / 180 [ ;
             var arcmin = (-90 + objMin *. 6) * Math.PI / 180 [;
             var arcSen = (-90 + objSen *. 6) Math.PI * / 180 [;
             / * draw disc * / 
            ctx.beginPath (); // start the path 
            for ( var I = 0; I <60; I ++) // a total of 360 degrees, a total of 60 minutes per minute apart 6 degrees, 360/6 = 60 
            { 
                ctx.moveTo (X, Y); // start point coordinates 
                ctx.arc (x, y, r, 6 * i * Math.PI / 180,6 * (i + 1) * Math.PI / 180 [, to false); // draw a circle 
            } 
            ctx.closePath (); // a closed path 
            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, every hour production 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 & lt, 30 Math.PI * I * / 180,30 * (I +. 1) Math.PI * / 180 [, to false ); 
            } 
            ctx.closePath (); 
            ctx.stroke (); 
            / * plotted below the white plate cover line * / 
            ctx.fillStyle = 'White' ; 
            ctx.beginPath (); 
            ctx.arc (X, Y, r * 18 is / 20,0,360 Math.PI * / 180 [, to false ); // a radius value of r 20 Fenzhi 18 
            ctx.closePath (); 
            ctx.fill (); 
            / * start drawing the hour and minute hands and the second hand, trick is to start and end arc as a radian value * /
            / * Start drawing hour * /  
            ctx.beginPath ();
            ctx.moveTo (X, Y); 
            ctx.lineWidth =. 7 ; 
            ctx.lineCap = 'round' ; 
            ctx.arc (X, Y, R & lt * 10/20 is, arcHour, arcHour, to false) ; // value of the radius r of 20 10 per
             ctx.stroke (); 
            ctx.closePath (); 
            / * start drawing minute * / 
            ctx.beginPath (); 
            ctx.moveTo (X, Y); 
            ctx.lineWidth . 5 = ; 
            ctx.lineCap = 'round' ; 
            ctx.arc (X, Y, r * 12 is / 20 is, arcmin, arcmin, to false); // a radius r value of 20 parts per 12 is
             ctx.stroke ();
            ctx.closePath (); 
            / * start drawing seconds * / 
            ctx.beginPath (); 
            ctx.moveTo (X, Y); 
            ctx.lineWidth = 2 ; 
            ctx.lineCap = 'round' ; 
            ctx.arc (X, Y, r * 16/20 is, arcSen, arcSen, to false); // value of the radius r of 20 16 per
             ctx.stroke (); 
            ctx.closePath (); 
        } 
        the setInterval ( 'drawClock ()', 1000); / / every 1 second timer function is invoked to draw a clock function 
    </ Script> 
</ body> 
</ HTML>

 

Guess you like

Origin www.cnblogs.com/lyl-0667/p/11241104.html