canvas: writing dynamic clock in native javascript

 
 

At this time, the needle is centered on the center of the canvas;

g.translate(width/2,width/2);

This function moves the origin of the canvas to (width/2,width/2)

 

Drawing dial

function jiang(){
                r = width/2
                g.clearRect(0, 0, 600, 600);
                
                g.save();
                g.translate(r, r);
                g.rotate(-Math.PI / 2);

              //Minute tick mark

                for(var i = 0; i < 60; i++) {//Draw 60 tick marks
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 4;
                    g.moveTo(250, 0);
                    g.lineTo(240, 0);
                    g.stroke();
                    g.rotate(Math.PI / 30); //Each 6 deg Draw a clock tick mark
                    g.closePath();
                }

              //Clock tick mark
                for(var i = 0; i < 12; i++) {//Draw 12 tick marks
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 8;
                    g.moveTo(250, 0);
                    g.lineTo(230, 0);
                    g.stroke();
                    g.rotate(Math.PI / 6); //Each 30 deg Draw a clock scale
                    g.closePath();
                }
            }

 

Hour hand

Save and restore are indispensable. Between these two functions, changing the location will not affect other functions. In this code, it refers to rotate in particular. If there is no rotate, save and restore can be avoided

Be sure to add beginPath to avoid being affected by other functions

The hour hand is different from the minute hand and the second hand. A 30 ° and the movement of the minute hand will affect the position of the hour hand

The principle of clockwise motion is to draw a line and then rotate that line

            function drawHour(hour,minu){
                g.save();
                g.beginPath();
                g.lineWidth = 9;
                var rad = Math.PI*2/12*hour;
                var radMinu = Math.PI*2/12/60*minu;
                g.rotate(rad + radMinu)
                g.moveTo(-10,0);
                g.lineTo(r/2,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }

Minute hand

            function drawMinu(minu){
                g.save();
                g.beginPath();
                g.lineWidth = 6;
                var radMinu = Math.PI*2/60*minu;
                g.rotate(radMinu)
                g.moveTo(-16,0);
                g.lineTo(r-100,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }

Second hand

       function drawSeco(seco){
                g.save();
                g.beginPath();
                g.lineWidth = 3;
                var radSeco = Math.PI*2/60*seco;
                g.rotate(radSeco)
                g.moveTo(-25,0);
                g.lineTo(r-80,0);
                g.strokeStyle = "#ff0032";
                g.stroke();
                g.restore();
            }

Digital table

        function drawNumClock(){
            var data = new Date();

            var sec = data.getSeconds();
            var min = data.getMinutes();
            var hour = data.getHours();

            g.fillStyle = "white";
            g.font = "20px 'Regular script'";
            g.beginPath();
            g.rotate(Math.PI/2)        
            g.fillText(hour,60,0);
            g.fillText(":",80,0);
            g.fillText(min,90,0);
            g.font = "20px 'Regular script'";
            g.fillText(sec,120,0);

        }

 

The overall code is attached below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Clock</title>
        <style type="text/css">
            .kuang{
                width: 600px; 
                height: 600px;
                margin: auto;
                padding: 5;
            }
        </style>
    </head>
    <body>
        <div class="kuang">
        <canvas id="zhong" width="600" height="600"></canvas>
        </div>
        <script type="text/javascript">
            var canvas =document.querySelector("canvas");
            canvas.style.background ="paleturquoise";
            var g = canvas.getContext("2d");  
            var width = canvas.width;
            var height = canvas.height;

          

                   //Draw turntable clock

            function jiang(){
                r = width/2
                g.clearRect(0, 0, 600, 600);
                
                g.save();
                g.translate(r, r);
                g.rotate(-Math.PI / 2);

              //Minute tick mark

                for(var i = 0; i < 60; i++) {//Draw 60 tick marks
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 4;
                    g.moveTo(250, 0);
                    g.lineTo(240, 0);
                    g.stroke();
                    g.rotate(Math.PI / 30); //Each 6 deg Draw a clock tick mark
                    g.closePath();
                }

              //Clock tick mark
                for(var i = 0; i < 12; i++) {//Draw 12 tick marks
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 8;
                    g.moveTo(250, 0);
                    g.lineTo(230, 0);
                    g.stroke();
                    g.rotate(Math.PI / 6); //Each 30 deg Draw a clock scale
                    g.closePath();
                }
            }

                /*Hour hand*/
            function drawHour(hour,minu){
                g.save();
                g.beginPath();
                g.lineWidth = 9;
                var rad = Math.PI*2/12*hour;
                var radMinu = Math.PI*2/12/60*minu;
                g.rotate(rad + radMinu)
                g.moveTo(-10,0);
                g.lineTo(r/2,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }
                /*Draw a minute hand*/
            function drawMinu(minu){
                g.save();
                g.beginPath();
                g.lineWidth = 6;
                var radMinu = Math.PI*2/60*minu;
                g.rotate(radMinu)
                g.moveTo(-16,0);
                g.lineTo(r-100,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }
                /*Second hand painting*/
            function drawSeco(seco){
                g.save();
                g.beginPath();
                g.lineWidth = 3;
                var radSeco = Math.PI*2/60*seco;
                g.rotate(radSeco)
                g.moveTo(-25,0);
                g.lineTo(r-80,0);
                g.strokeStyle = "#ff0032";
                g.stroke();
                g.restore();
            }
            /*Digital table*/
        function drawNumClock(){
            var data = new Date();

            var sec = data.getSeconds();
            var min = data.getMinutes();
            var hour = data.getHours();

            g.fillStyle = "white";
            g.font = "20px 'Regular script'";
            g.beginPath();
            g.rotate(Math.PI/2)        
            g.fillText(hour,60,0);
            g.fillText(":",80,0);
            g.fillText(min,90,0);
            g.font = "20px 'Regular script'";
            g.fillText(sec,120,0);

        }

        function draw(){
            
            var data = new Date();
            var sec = data.getSeconds();
            var min = data.getMinutes();
            var hour = data.getHours();
            jiang();
            drawHour(hour,min);
            drawMinu(min);
            drawSeco(sec);
            drawNumClock()
            g.restore();
            
        }
            
        setInterval(draw,10)

        </script>
    
    </body>
</html>
  

Tags: Javascript

Posted on Wed, 04 Dec 2019 08:47:15 -0500 by Hitman2oo2