Online: 10332
Online: 10332
Online: 10332
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 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>
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 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>
mycanvas, with the width 200 and height and 200 with the style as background color as magenta100 in the center of the canvas with the function(drawclock)function (drawclock) defines the drawface, and draw numbers,drawface we have defined the canvas face with the given valuesfunction(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
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>
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
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>
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
