Canvas Clock Hands







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Canvas Clock Hands



❮ Previous
Next ❯



Part IV - Draw Clock Hands


The clock needs hands. Create a JavaScript function to draw clock hands:





JavaScript:



function drawClock() {
    drawFace(ctx, radius);
   
drawNumbers(ctx, radius);
    drawTime(ctx, radius);
}

function drawTime(ctx, radius){
    var now = new Date();
   
var hour = now.getHours();
    var minute = now.getMinutes();
   
var second = now.getSeconds();
    //hour
   
hour=hour%12;
    hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
   
drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
   
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
   
drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
   
second=(second*Math.PI/30);
    drawHand(ctx, second,
radius*0.9, radius*0.02);
}

function drawHand(ctx,
pos, length, width) {
    ctx.beginPath();
   
ctx.lineWidth = width;
    ctx.lineCap = "round";
   
ctx.moveTo(0,0);
    ctx.rotate(pos);
   
ctx.lineTo(0, -length);
    ctx.stroke();
   
ctx.rotate(-pos);
}

Try it Yourself »








googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });






Example Explained



Use Date to get hour, minute, second:




var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();



Calculate the angle of the hour hand, and draw it a length (50% of radius),
and a width (7% of radius):




hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);



Use the same technique for minutes and seconds.


The drawHand() routine does not need an explanation. It just draws a line
with a given length and width.





❮ 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
drawClock();
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?