Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts

    JS clock using canvas

    What to do when you are bored...
    Make a clock using Java script and HTML5's canvas.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>JS / Canvas clock</title>
        <style type="text/css">
            #canvas
            {
                border:1px solid black;
            }
        </style>
    </head>
    <body onload="init();">
    <h1>JS clock using canvas</h1>
    <canvas id="canvas" width="420" height="420"">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
        <script type="text/javascript">
    function init() {
    
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        intertimer = setInterval(draw, 1);
    }
    
    function draw()
    {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        
        //draw base clock
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.fillStyle = "silver";
        ctx.beginPath();
        ctx.arc(210, 210, 200, 0, (2 * Math.PI), false);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        
        //draw 5 minutes marks
        var segment = ((2*Math.PI)/12);
        ctx.lineWidth = 4;
        for(i = 0 ; i<12 ;i++)
        {
            ctx.beginPath();
            ctx.moveTo(210+(Math.sin(segment*i)*180), 210-(Math.cos(segment*i)*180));
            ctx.lineTo(210+(Math.sin(segment*i)*190), 210-(Math.cos(segment*i)*190));
            ctx.stroke();
            ctx.closePath();
        }
        
        var min_segs = ((2*Math.PI)/60);
        var hour_segs = ((2*Math.PI)/12);
        
        //draw hands
        ctx.lineWidth = 6;
        ctx.strokeStyle = "red"; 
        ctx.beginPath();
        ctx.moveTo(210,210);
        ctx.lineTo(210+(Math.sin(hour_segs*(hours+(minutes/60)))*150), 210-(Math.cos(hour_segs*(hours+(minutes/60)))*150));
        ctx.stroke();
        ctx.closePath();
        
        ctx.lineWidth = 4;
        ctx.strokeStyle = "green"; 
        ctx.beginPath();
        ctx.moveTo(210,210);
        ctx.lineTo(210+(Math.sin(min_segs*(minutes+(seconds/60)))*180), 210-(Math.cos(min_segs*(minutes+(seconds/60)))*180));
        ctx.stroke();
        ctx.closePath();
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue"; 
        ctx.beginPath();
        ctx.moveTo(210,210);
        ctx.lineTo(210+(Math.sin(min_segs*seconds)*190), 210-(Math.cos(min_segs*seconds)*190));
        ctx.stroke();
        ctx.closePath();
    }
    </script>
    </body>
    </html>
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Playing around with it a bit more, I changed the scaling options for size display.
    Hopefully I've got an understanding of what you are doing and did not miss anything.
    Only requires number changes in 4 places (<canvas> tag, canvasH, canvasW and canvasR)
    See sample settings.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>JS / Canvas clock</title>
    <style type="text/css">
     #canvas {
        border:1px solid black;
     }
    </style>
    </head>
    <body onload="init();">
    <h1>JS clock using canvas</h1>
    <canvas id="canvas" width="220" height="220"">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=273029
    // Modified for scaling purposes
    
    // set to same as <canvas> tag parameters
    var canvasW = 220; // possible settings (420, 320, 220, 120)
    var canvasH = 220; // possible settings (420, 320, 220, 120)
    var canvasR = 100; // possible settings (200, 150, 100, 50)
    
    function init() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        intertimer = setInterval(draw, 1);
    }
    
    function draw() {
      var high = (canvasH / 2);
      var wide = (canvasW / 2);
    
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        
    //draw base clock
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.fillStyle = "silver";
        ctx.beginPath();
        ctx.arc(wide, high, canvasR, 0, (2 * Math.PI), false);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        
        //draw 5 minutes marks
        var segment = ((2*Math.PI)/12);
        ctx.lineWidth = 4;
        for(i = 0 ; i<12 ;i++) {
            ctx.beginPath();
            ctx.moveTo(wide+(Math.sin(segment*i)*(canvasR-20)),
                       high-(Math.cos(segment*i)*(canvasR-20)));
            ctx.lineTo(wide+(Math.sin(segment*i)*(canvasR-10)),
                       high-(Math.cos(segment*i)*(canvasR-10)));
            ctx.stroke();
            ctx.closePath();
        }
        
        var min_segs = ((2*Math.PI)/60);
        var hour_segs = ((2*Math.PI)/12);
        
        //draw hands
        ctx.lineWidth = 6;
        ctx.strokeStyle = "red"; 
        ctx.beginPath();
        ctx.moveTo(wide,high);
        ctx.lineTo(wide+(Math.sin(hour_segs*(hours+(minutes/60)))*(canvasR/2)),
                   high-(Math.cos(hour_segs*(hours+(minutes/60)))*(canvasR/2)));
        ctx.stroke();
        ctx.closePath();
        
        ctx.lineWidth = 4;
        ctx.strokeStyle = "green"; 
        ctx.beginPath();
        ctx.moveTo(wide,high);
        ctx.lineTo(wide+(Math.sin(min_segs*(minutes+(seconds/60)))*(canvasR-20)),
                   high-(Math.cos(min_segs*(minutes+(seconds/60)))*(canvasR-20)));
        ctx.stroke();
        ctx.closePath();
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue"; 
        ctx.beginPath();
        ctx.moveTo(wide,high);
        ctx.lineTo(wide+(Math.sin(min_segs*seconds)*(canvasR-10)),
                   high-(Math.cos(min_segs*seconds)*(canvasR-10)));
        ctx.stroke();
        ctx.closePath();
    }
    </script>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You have a spare quote at the end of this line:
    Code:
    <canvas id="canvas" width="220" height="220"">
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    cool thanks for the adding the ability to resize jmrker. And for noticing the error AndrewGSW
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •