Eight Diagrams and clock for canvas-

Bagua map:

<body> 
Canvas ID = " myCanvas " width = " 500 " height = " 600 " > </ Canvas> 
<Script> 
// Get the canvas element to 
the let myCanvas = document.getElementById ( " myCanvas); 
// canvas elements obtained by to the context (pen) 
the let CTX = myCanvas.getContext ( " 2D " ); 
// the right white semi 
ctx.fillStyle = "# FFF " ; 
ctx.beginPath (); 
ctx.arc ( 300 , 300 , 100 , (the Math .PI / 180 [ ) * 270, (Math.PI / 180 [ ) * 90 ); 
ctx.fill (); 
// left black circle 
ctx.fillStyle = # 000 " ; 
ctx.beginPath (); 
ctx.arc ( 300 , 300 , 100 , (the Math .PI / 180 [ ) * 270 , (Math.PI / 180 [ ) * 90 , to true ); 
ctx.fill (); 
// left white small round 
ctx.fillStyle = "# FFF " ; 
ctx.beginPath (); 
CTX .arc ( 300 , 250 , 50 , (Math.PI /180 [ ) * 270 , (Math.PI / 180 [ ). 90 , to true ); 
ctx.fill (); 
// the right small round black 
ctx.fillStyle = "# 000 "; 
ctx.beginPath (); 
ctx.arc ( 300 , 350 , 50 , (Math.PI / 180 [ ) * 270 , (Math.PI / 180 [ ) * 90 ); 
ctx.fill (); 
// black dots 
ctx.fillStyle = "# 000 " ; 
CTX .beginPath (); 
ctx.arc ( 300 , 250 , . 5, 0 , Math.PI * 2 ); 
ctx.fill (); 
// white dots 
ctx.fillStyle = "# FFF " ; 
ctx.beginPath (); 
ctx.arc ( 300 , 350 , . 5 , 0 , * Math.PI 2 ); 
ctx.fill ();
 </ Script> 
</ body>

clock:

<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 var CTX = c.getContext ( '2D'); // get the context function drawClock () 
        { 
            ctx.clearRect ( 0,0, c.width, c.height); // Clear canvas 
            c. = c.width 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
        
        
        
            
            
            DATE ();
             var objHour = objTime.getHours ();
             var objMin = objTime.getMinutes ();
             var objSen = objTime.getSeconds ();
             / * converting radians specific time * / 
            / * 
             * Since the clock from the 12 count start position of a point, but the canvas is counted as 3 o'clock position of 0 degree, -90 degrees, so the direction of 12 o'clock point 
             * are separated by 30 degrees clockwise hour, objMin / 2 in order to make more than half when the minute hand, hour hand accordingly it lies between two hours 
             * per minute and second hands are separated by 6 degrees 
             * / 
            var arcHour = (30 + -90 * + objHour objMin / 2) * Math.PI / 180 [ ;
             var arcmin = (-90+ *. 6 objMin) * Math.PI / 180 [;
             var arcSen = (-90 + objSen *. 6) * Math.PI / 180 [;
             / *Drawing the 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 Math.PI * I * / 180,6 * (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 *. 19 / 20,0,360 * Math.PI / 180 [, to false ); // a radius value of 20 19 ppm of r
            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 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 & lt * 18 is / 20,0,360 Math.PI * / 180 [, to false ); // a radius ranging from 20 parts per 18 r of 
            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 * / 
            / * begin drawing the hour * / 
            ctx.beginPath (); 
            ctx.moveTo (the X-, Y); 
            ctx.lineWidth =. 7 ; 
            ctx.lineCap = 'round' ; 
            ctx.arc (X, Y, r * 10/20 is, arcHour, arcHour, to false); // a radius value r of 10 1/20
             ctx.stroke (); 
            ctx.closePath (); 
            / *Start drawing minute * / 
            ctx.beginPath (); 
            ctx.moveTo (X, Y); 
            ctx.lineWidth =. 5 ; 
            ctx.lineCap = 'round' ; 
            ctx.arc (X, Y, R & lt * 12 is / 20 is, arcmin, arcMin, 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 second clock function call drawn 
    </ Script> 
</ body>

Eight Diagrams and clock for canvas-

Guess you like