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.

<!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. :D
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.

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