Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • A Concentric Circle Clock Using JavaScript and Canvas

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.36k
    Comment on it

    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 :-

    1. fillStyle :- This property helps in filling color, gradient or the pattern that are used in drawing.
    2. StrokeStyle :- This property basically helps for setting the color, gradient or pattern to the stroke.
    3. AddColorStop :-It basically specifies the colors and stop the positions in a gradient object .
    4. ShadowBlur :- This property helps in setting the blur level for shadows.
    5. ShadowColor :-This property helps in setting the color that is to be used in shadow.
    6. LineCap:- This property helps in styling the end caps of the line.
    7. LineWidth :- This property helps in setting the current line width.
    8. BeginPath( ) :-It helps in setting the current path.
    9. Arc( ) :- It is used for creating the circle or part of circle.
    10. 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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: