Canvas Clock Start
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Canvas Clock Start
❮ Previous
Next ❯
In these chapters we build an analog clock using HTML Canvas.
Part V - Start the Clock
To start the clock, call the drawClock function at intervals:
JavaScript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();
setInterval(drawClock, 1000);
Try it Yourself »
Example Explained
The only thing you have to do (to start the clock) is to call the drawClock
function at intervals.
Substitute:
drawClock();
With:
setInterval(drawClock, 1000);The interval is in milliseconds. drawClock will be called for each 1000
milliseconds.
❮ Previous
Next ❯
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height/2;
ctx.translate(radius, radius);
radius = radius*0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
