Hello readers, today in my blog I will discuss about canvas . Using canvas I have created a Concentric circle clock.
The HTML <canvas> element is used to draw graphics on a web page using JavaScript.
It basically used to create text, images , graphs , rectangles , lines , gradients and various other effects dynamically.
Its element is defined in the HTML code by using the height and width attributes on a web page.
Features :-
- It is fully interactive and respond to the user action.
- Every object that is drawn on the canvas can be easily animated.
- Using this we can create everything which we want.
- The HTML5 Canvas is supported by all the major browsers.
- With the help of canvas we can create no. of applications such as gaming, advertising , data representation etc.
In the canvas code , we creates an id attribute which will be useful in JavaScript.
In the line of code we will create a variable that will help in caching our created canvas elements with the help of ID for accessing all the functions and properties used in canvas for drawing.
In my blog I have created a concentric clock where I have used various functions , style , properties and paths that are used in drawing .
Below is the list of various properties and function that are used in drawing shapes and innovating them , these are as follows :-
- fillStyle :- This property helps in filling color, gradient or the pattern that are used in drawing.
- StrokeStyle :- This property basically helps for setting the color, gradient or pattern to the stroke.
- AddColorStop :-It basically specifies the colors and stop the positions in a gradient object .
- ShadowBlur :- This property helps in setting the blur level for shadows.
- ShadowColor :-This property helps in setting the color that is to be used in shadow.
- LineCap:- This property helps in styling the end caps of the line.
- LineWidth :- This property helps in setting the current line width.
- BeginPath( ) :-It helps in setting the current path.
- Arc( ) :- It is used for creating the circle or part of circle.
- FillRect( ):- It helps to draw a filled rectangle.
Below is the HTML code of the above example :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Concentric Circle Clock</title>
</head>
<body>
<canvas id='canvas' width='500' height='500'></canvas>
<img id='myImage' />
<script src="js/javascript.js"></script>
</body>
</html>
In the JavaScript code , firstly I have set various canvas properties as per the requirement these were as follows :-
strokeStyle , lineWidth, lineCap, shadowBlur and shadowColor .
Then I created a function named degree to Radian , with a variable name as factor and assigned a value to it such that the function on return gives a product of var factor and degree as argument. I created this function for getting number of radians.
Next I created an another function and named it as render Time( ) for calculating the date, time in hours, minutes, second and millisecond.
Now for setting the background color I have used gradient property for filling the rectangle .
As in the example there are 3 concentric circles representing the hours, minutes and seconds corresponding to the 3 strokes creating an arc.
With the help of date and time picker function , I have displayed the time and date and adjusted the font-style and color.
Below is the JavaScript code for the above example :-
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#28d1fa';
ctx.lineWidth = 17;
ctx.lineCap = 'round';
ctx.shadowBlur = 15;
ctx.shadowColor = '#28d1fa';
function degToRad(degree) {
var factor = Math.PI/180;
// returns number of radians
return degree * factor;
}
function renderTime() {
//get actual time using date object
var now = new Date();
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
// this variable added to keep seconds from jumping and smoothly going around
var newSeconds = seconds+(milliseconds/1000);
// Background
gradient = ctx.createRadialGradient(250,250,5,250,250,300);
gradient.addColorStop(0,'#09505a');
gradient.addColorStop(1,'black');
ctx.fillStyle = gradient;
//ctx.fillStyle = '#333';
ctx.fillRect(0,0,500,500);
// Hours
ctx.beginPath();
ctx.arc(250,250,200, degToRad(270), degToRad((hours*15)-90));
ctx.stroke();
// Minutes
ctx.beginPath();
ctx.arc(250,250,170, degToRad(270), degToRad((minutes*6)-90));
ctx.stroke();
// Seconds
ctx.beginPath();
ctx.arc(250,250,140, degToRad(270), degToRad((newSeconds*6)-90));
ctx.stroke();
// Date
ctx.font = '25px Arial';
ctx.fillStyle = '#28d1fa';
ctx.fillText(today, 175, 250);
// Time
ctx.font = '15px Arial';
ctx.fillStyle = '#28d1fa';
ctx.fillText(time, 175, 275);
var dataUrl = canvas.toDataURL;
document.getElementById('myImage').src = dataURL;
}
setInterval(renderTime, 40);
Conclusion :-
Hence, I have created a concentric circle clock using JavaScript and Canvas.
Note:- The above example will run on all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)