Clock in canvas
I made a clock in the canvas, I actually draw lines on the canvas from the center, for every second I draw a line from the center in a circle, I finish the second line for all hours. how to clear a previously drawn line to make it look like a real clock.
Help gratefully thank you
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
for (i = 0; i < 360; i += 10) {
ctx.moveTo(i + 5, 180);
ctx.lineTo(i, 180);
}
for (i = 0; i < 360; i += 10) {
ctx.moveTo(180, i + 5);
ctx.lineTo(180, i);
}
ctx.stroke();
var iSin = 0,
counterSin = 0,
xSin = 180,
ySin = 0;
var iCos = 0,
counterCos = 0,
xCos = 0,
yCos = 180;
var iCircle = 0,
counterCircle = 0,
xCircle = 180,
yCircle = 0;
var iLinesInCircle = 0,
counterLinesInCircle = 0,
xLinesInCircle = 180,
yLinesInCircle = 0;
var iMinutes = 0,
counterMinutes = 0,
xMinutes = 180,
yMinutes = 0;
var iHours = 0,
counterHours = 0,
xHours = 180,
yHours = 0;
var increase = 90 / 180 * Math.PI / 9;
var increaseLinesInCircle = 6 * Math.PI / 180;
var increaseMinutes = 6 * Math.PI / 180;
var increaseHours = 6 * Math.PI / 180;
//drawSineWave();
//drawCosineWave();
//drawCircle();
drawLinesInCircle();
drawMinutes();
drawHours();
function drawSineWave() {
ctx.beginPath();
ctx.strokeStyle = ("#0C620B");
ctx.lineWidth = 1;
ctx.moveTo(xSin, ySin);
xSin = 180 + Math.sin(counterSin) * 180;
ySin = iSin;
counterSin += increase;
ctx.lineTo(xSin, ySin);
ctx.stroke();
iSin += 10;
if (iSin <= 360) {
setTimeout(drawSineWave, 100);
}
}
function drawCosineWave() {
ctx.beginPath();
ctx.strokeStyle = ("#BE1616");
ctx.lineWidth = 1;
ctx.moveTo(xCos, yCos);
xCos = iCos;
yCos = 180 - Math.cos(counterCos) * 180;
counterCos += increase;
ctx.lineTo(xCos, yCos);
ctx.stroke();
iCos += 10;
if (iCos <= 360) {
setTimeout(drawCosineWave, 100);
}
}
function drawCircle() {
ctx.beginPath();
ctx.strokeStyle = ("#021A02");
ctx.lineWidth = 1;
ctx.moveTo(xCircle, yCircle);
xCircle = 180 + Math.sin(counterCircle) * 180;
yCircle = 180 - Math.cos(counterCircle) * 180;
counterCircle += increase;
ctx.lineTo(xCircle, yCircle);
ctx.stroke();
iCircle += 10;
if (iCircle <= 360) {
setTimeout(drawCircle, 100);
}
}
function drawLinesInCircle() {
var ctxline = c.getContext("2d");
//ctxline.restore();
ctxline.beginPath();
ctxline.strokeStyle = ("#EDDE54");
ctxline.lineWidth = 1;
ctxline.moveTo(180, 180);
xLinesInCircle = 180 + Math.sin(counterLinesInCircle) * 180;
yLinesInCircle = 180 - Math.cos(counterLinesInCircle) * 180;
counterLinesInCircle += increaseLinesInCircle;
ctxline.lineTo(xLinesInCircle, yLinesInCircle);
ctxline.stroke();
//ctxline.clearRect(0,0,360,360 );
iLinesInCircle += 6;
if (iLinesInCircle <= 360) {
setTimeout(drawLinesInCircle, 1000);
}
}
function drawMinutes() {
ctx.beginPath();
ctx.strokeStyle = ("#545EED");
ctx.lineWidth = 5;
ctx.moveTo(180, 180);
xMinutes = 180 + Math.sin(counterMinutes) * 160;
yMinutes = 180 - Math.cos(counterMinutes) * 160;
counterMinutes += increaseMinutes;
ctx.lineTo(xMinutes, yMinutes);
ctx.stroke();
iMinutes += 6;
if (iMinutes <= 360) {
setTimeout(drawMinutes, 60000);
}
}
function drawHours() {
ctx.beginPath();
ctx.strokeStyle = ("#BE1616");
ctx.lineWidth = 7;
ctx.moveTo(180, 180);
xHours = 180 + Math.sin(counterHours) * 120;
yHours = 180 - Math.cos(counterHours) * 120;
counterHours += increaseHours;
ctx.lineTo(xHours, yHours);
ctx.stroke();
iHours += 6;
if (iHours <= 360) {
setTimeout(drawHours, 3600000);
}
}
<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">
+3
source to share
3 answers
You have one global timeout that ticks every second and increments the number of global variables that keep track of how many seconds, minutes and hours have passed.
Something conceptually similar ... (not tested)
var second = 0;
var minute = 0;
var hour = 0;
setTimeout(tick, 1000);
function tick() {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the clock background or anything else first
drawBackground();
// Increment the seconds and check if a minute has been reached
if (++second == 60) {
// Increment the minutes and check if an hour has been reached
if (++minute == 60) {
// Increment the hours and check if it has reached 12 again
if (++hours == 12) {
hour = 0;
}
// Overlay the hour hand, using the hours variable
drawHourHand(hour);
// Reset the minute counter
minute = 0;
}
// Overlay the minute hand, using the minutes variable
drawMinuteHand(minute);
// Reset the second counter
second = 0;
}
// Overlay the second hand, using the seconds variable
drawSecondHand(second);
}
You then have global control over your timings from one location, and every time the clock is ticking, you redraw the elements on the canvas in their new locations.
You need to hook up temporary variables to your drawing functions so that they can be directly used to calculate the angle at which your hand should rest on the watch face.
function drawSecondHand(seconds) {
var degrees = seconds * 6;
// Convert to radians and draw your line, etc...
}
In the above function, you are calculating the degrees of the angle of the line using the seconds variable that comes from your global time.
1 second = 6 degrees
2 second = 12 degrees
3 second = 18 degrees
...
58 second = 348 degrees
59 second = 354 degrees
60 second (reset to 0 second) = 0 degrees
1 second = 6 degrees
2 second = 12 degrees
...
0
source to share
You should have a main function that calls every function in your script. This function should be cleared every time on the screen.
For example:
/*
Your script here
*/
function draw() {
ctx.save();
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
//draw
drawSineWave();
drawCircle();
drawLinesInCircle()
drawMinutes();
drawHours();
ctx.restore();
}
var animateInterval = setInterval(draw,0);
Let me know if it works for you
0
source to share