CanvasClock Hands
Part IV - Draw Clock Hands
The clock needs hands. Create a JavaScript function to draw clock hands:
#"tryit.asp?filename=trycanvas_clock_hands">Try it Yourself »
Example Explained
Create a Date object to get hour, minute, second:
const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
let hour = now.getHours();
let minute = now.getMinutes();
let 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);
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.
