Canvas Clock Numbers
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
Canvas Clock Numbers
❮ Previous
Next ❯
Part III - Draw Clock Numbers
The clock needs numbers. Create a JavaScript function to draw clock numbers:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num= 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
Try it Yourself »
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height/2;
ctx.translate(radius, radius);
radius = radius*0.90
drawClock(ctx, radius);
function drawClock(ctx, radius) {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
}
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });
Example Explained
Set the font size (of the drawing object) to 15% of the radius:
ctx.font = radius*0.15 + "px arial";
Set the text alignment to the middle and the center of the print position:
ctx.textBaseline="middle";
ctx.textAlign="center";Calculate the print position (for 12 numbers) to 85% of the
radius, rotated (PI/6) for each number:
for(num= 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}❮ Previous
Next ❯
