Simple Analog clock

Hi.

Here is a sample of an analog clock for Adobe Animate using the HTML5 Canvas document.

Preview:

Try it:

http://bit.ly/3bNp4qi

Javscript / JS code:

var root = this;

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	root.stop();
	root.analogClock = new root.AnalogClock(root.clock.seconds, root.clock.minutes, root.clock.hours);
};

root.AnalogClock = function(secondsHand, minutesHand, hoursHand, stop)
{
	this.secondsHand = secondsHand;
	this.minutesHand = minutesHand;
	this.hoursHand = hoursHand;
	
	if (!stop)
		this.start();
};

root.AnalogClock.prototype.start = function()
{
	this.update();
	this.stop();
	this.interval = setInterval(this.update.bind(this), 1000);
};

root.AnalogClock.prototype.stop = function()
{
	clearInterval(this.interval);
};

root.AnalogClock.prototype.update = function()
{
	var now = new Date();
	
    // seconds
	this.second = now.getSeconds();
    this.second = (this.second * Math.PI / 30);
	this.secondsHand.rotation = this.second * 180 / Math.PI;
	
	// minutes
	this.minute = now.getMinutes();
    this.minute = (this.minute * Math.PI / 30) + (this.second * Math.PI / (30 * 60));
	this.minutesHand.rotation = this.minute * 180 / Math.PI;
	
	// hours
	this.hour = now.getHours();
    this.hour = this.hour % 12;
    this.hour = (this.hour * Math.PI / 6) + (this.minute * Math.PI / (6 * 60)) + (this.second * Math.PI / (360 * 60));
	this.hoursHand.rotation = this.hour * 180 / Math.PI;
};

root.main();

Source / files / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/analog_clock

Please let us know if you need something else.

Regards,

JC

Hi Vladin M Mitove- many thanks for your reply. I am new to this so I am not sure what I must do with the information you have sent me and how it relates to Adobe Animate 2020?

https://www.w3schools.com/graphics/canvas_clock.asp