HTML5 > Canvas Animation

Analog clock using canvas in HTML5

How to create the clock using canvas HTML5


Clock

In order to create the clock we need HTML container

 <canvas id="canvas" width="200" height="200"
            style="background-color:green"></canvas>
    <p><b>Creating clock shape with canvas</b> </p>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var radius = 100;
        ctx.translate(100, 100);
        radius = radius * 0.9
        drawClock();

        function drawClock() {
            ctx.arc(0, 0, 100, 0, 2 * Math.PI);
            ctx.fillStyle = "pink";
            ctx.fill();
        }
    </script>

In the above code snippet we have defined the how to draw the background of the clock, we ahave canvas element with the id as "mycanvas"  and with width of "200" and height as 200 ,with the background color  as green

var canvas = document.getElementById("canvas"); - It defines the function with the id as mycanvas

var ctx = canvas.getContext("2d"); - "context" is declared to the "canvas"

var radius = 100; - It defines the radius as "100"

ctx.translate(100, 100); - It translate the radius to the center in the canvas

radius = radius * 0.9 - It defines the radius as radius * 0.9 value

In the nextline we are having the function drawclock()

In the function drawclock we have declared the values as

ctx.arc(0, 0, 100, 0, 2 * Math.PI); - It defines (x, y, radius,)

2*Math.PI -  defines the circle

ctx.fillStyle = "red"; - It fills the circle with the pink color.

output

Clock Face

Clock face is used to create the face which is used to hold the clock hands which contains hours, minutes and seconds, in order to display the clock face we need to create the clock shape.   

  <canvas id="canvas" width="200" height="200"
            style="background-color:magenta"></canvas>
    <p><i><b>Canvas clock with face</b></i></p>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var radius = 100;
        ctx.translate(radius, radius);
        radius = radius * 0.9
        drawClock();

        function drawClock() {
            drawFace(ctx, radius);
        }

        function drawFace(ctx, radius) {
            var grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(1, 2, radius * 0.67, 0, 0, radius * 1.05);
            grad.addColorStop(0, 'pink');
            grad.addColorStop(0.5, 'green');
            grad.addColorStop(1, 'green');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.2;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = 'black';
            ctx.fill();
        }
    </script>

Clock Face

In the above code snippet we have defined the clock face. we have created the clock face,    

<canvas> - It defines the canvas element with the id as mycanvas, width="200" and height="200"

In the nextline we are giving the <script>tag to define the function of the clock                 

var canvas = document.getElementById("canvas"); - It defines the canvas id to mycanvas

var ctx = canvas.getContext("2d"); - it defines the context to the canvas 

var radius = 100; - It defines the radius as 100

ctx.translate(radius, radius); - It translate the given text, values to the center of the canvas

radius = radius * 0.9 - We are defining the radius value as radius *0.9

In the nextline we are having the function drawclock(), in that function we are having drawface(context,radius)

In the function drawface(context, radius) we are defining the values of the rectangle , color, arc, strokestyle, line width, fill color, linear gradient color   to define the values

output

 

Clock Numbers 

Clock numbers is used to display the numbers in the clock which contains numbers form 1 to 12, In order to create the numbers in the clock we need to add the face and shape of the clock    

 <h1 style="color:green; font-style:italic;">Clock Numbers </h1>
    <canvas id="mycanvas" width="200" height="200"
            style="background-color:magenta"></canvas>

    <script>
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");

        var radius = 100;
        ctx.translate(100, 100);
        radius = 100 * 0.9
        drawClock();

        function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
        }

        function drawFace(ctx, radius) {
            var grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(0, 0, radius * 1.95, 0, 0, radius * 1.05);
            grad.addColorStop(0, '#333');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1, '#333');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
        }

        function drawNumbers(ctx, radius) {
            var ang;
            var num;
            ctx.font = radius * 0.15 + "px arial";
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            for (num = 1; num < 13; num++) {
                ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        }
    </script>

Clock Numbers  

  • In the above code snippet we have created the clock numbers using canvas. we have the canvas element as mycanvas, with the width 200 and height and 200 with the style as background color as magenta
  • We have defined the radius value with 100 in the center of the canvas with the function(drawclock)
  • The function (drawclock) defines the drawface, and draw numbers,
  • In the drawface we have defined the canvas face with the given values
  • In the function(draw numbers) we have defined the numbers which are present in the rectangle by using for condition defining the values from 1 to 13 which starts the number from 1 to 12   

output

Clock Hands

In order to display the clock Hands we need to add the time, in time we need to add the hours, minutes, seconds to display the hands. The clock hands is created after declaring the face and numbers  

 <h1 style="color:red">Creating the <span style="color:blue;font-style:italic;">Hands</span> on the Clock </h1>
    <canvas id="mycanvas" width="200" height="200"
            style="background-color:green"></canvas>

    <script>
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");

        var radius = 100;
        ctx.translate(100, 100);
        radius = radius * 0.9
        drawClock();

        function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
            drawTime(ctx, radius);
        }

        function drawFace(ctx, radius) {
            var grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
            grad.addColorStop(0, '#333');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1, '#333');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
        }

        function drawNumbers(ctx, radius) {
            var ang;
            var num;
            ctx.font = radius * 0.15 + "px arial";
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            for (num = 1; num < 13; num++) {
                ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        }

        function drawTime(ctx, radius) {
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            
            hour = hour % 12;
            hour = (hour * Math.PI / 6) +
            (minute * Math.PI / (6 * 60)) +
            (second * Math.PI / (360 * 60));
            drawHand(ctx, hour, radius * 0.5, radius * 0.07);
            
            minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
            drawHand(ctx, minute, radius * 0.8, radius * 0.07);
            
            second = (second * Math.PI / 30);
            drawHand(ctx, second, radius * 0.9, radius * 0.02);
        }

        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = "round";
            ctx.moveTo(0, 0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }
    </script>

Clock Hands

In the above code snippet we have defined the clock hands 

To create the clock hands , we need to create the clock, clock face, clock numbers.

We are having canvas element with id as mycanvas and width= 200 and height= 200 and radius= 100 

In the first step we are having function drawclock() to define the clock, face, numbers 

The function drawface() defines to create the face in the clock with the given values 

The function drawnumbers() defines to create the numbers in the clock with the given values

The function drawtime() defines the time to display the current time in the output, we have created the hours , minutes, seconds to display the present output

In the function drawhand we have created the values to display the hands showing present date in the output with the given values

output

Drawclock

Draw clock shows the current time in the clock, in order to run the clock we need to declare the face, numbers, hands, time of the clock.

<h2 style="color:red"><b><i>Clock showing <span style="color:blue;">Current</span>Time</i></b></h2>
    <canvas id="canvas" width="200" height="200"
            style="background-color:green"></canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var radius = 100;
        ctx.translate(100, 100);
        radius = radius * 0.9

        setInterval(drawClock, 1000);

        function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
            drawTime(ctx, radius);
        }

        function drawFace(ctx, radius) {
            var grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
            grad.addColorStop(0, 'blue');
            grad.addColorStop(0.5, 'pink');
            grad.addColorStop(1, 'yellow');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = 'blue';
            ctx.fill();
        }

        function drawNumbers(ctx, radius) {
            var ang;
            var num;
            ctx.font = radius * 0.15 + "px arial";
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            for (num = 1; num < 13; num++) {
                ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        }

        function drawTime(ctx, radius) {
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            
            hour = hour % 12;
            hour = (hour * Math.PI / 6) +
            (minute * Math.PI / (6 * 60)) +
            (second * Math.PI / (360 * 60));
            drawHand(ctx, hour, radius * 0.5, radius * 0.07);
            
            minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
            drawHand(ctx, minute, radius * 0.8, radius * 0.07);
            
            second = (second * Math.PI / 30);
            drawHand(ctx, second, radius * 0.9, radius * 0.02);
        }

        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = "rectangle";
            ctx.moveTo(0, 1);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }
    </script>

Drawclock

In the above code snippet we have defined the drawing of the clock. We have taken the canvas element as with id as mycanvas and width= 200 and height = 200 and style  as background color as  5 px solid green  

var canvas=document.getElementById("mycanvas");- It defines the var canvas with the id as mycanvas

var ctx= canvas.getcontext("2d");- It defines as the ctx to the canvas element with the 2d element

var radius= 100- It declares the radius value with the 100

ctx.translate=(100, 100) - It defines the given text in to the center of the canvas

radius= radius*0.9 - It defines the radius value (100*0.9)

setInterval(drawClock, 1000); - It defines the drawing the clock with the current time in the output

In the nextline we are having the function (drawclock) which is used to define the face, numbers, time which are used to create the clock

In the nextline we are having the function (drawface) - It defines the face of the clock which is given by the values

In the nextline we are having the function (numbers)- It defines the numbers in the clock using the gi ven values

In the nextfunction, function (drawtime) - It defines the time with the hours, minutes, seconds, which present the current time in the output

In the next function , function (drawhand) - It defines the function to create the hands using the given values in the function 

output

 

 Views: 3733 | Post Order: 116



Write for us