  HTML CSS MORE  

w3schools.com

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){
HTML CSS MORE 
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 »

Example Explained
Use Date to get hour, minute, second:
 var now = new Date();
HTML CSS MORE 
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 ❯
HTML CSS MORE 

COLOR PICKER

Exercises

HTML
CSS

JavaScript
SQL

PHP
Python
HTML CSS MORE Bootstrap

jQuery

SHARE

  


CERTIFICATES
HTML
CSS
JavaScript
PHP
jQuery
Bootstrap
XML

Read More »
HTML CSS MORE 
HTML CSS MORE 

REPORT ERROR
PRINT PAGE
FORUM
ABOUT

Top 10 Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP Tutorial
jQuery Tutorial
Python Tutorial

Top 10 References
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Bootstrap Reference
SQL Reference
PHP Reference
HTML Colors
jQuery Reference
Python Reference

Top 10 Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
 W3.CSS Examples
HTML CSS MORE 
Bootstrap Examples
PHP Examples
jQuery Examples
Angular Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and
basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of
use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.