JS clock using canvas

timgolding · 09-13-2012, 11:48 AM

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>

jmrker · 09-14-2012, 07:40 PM

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>

AndrewGSW · 09-15-2012, 08:05 PM

You have a spare quote at the end of this line:

Code:

<canvas id="canvas" width="220" height="220"">

timgolding · 09-17-2012, 09:20 AM

cool thanks for the adding the ability to resize jmrker. And for noticing the error AndrewGSW