50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
"use strict";
|
|
|
|
const padStart = value => value.toString().padStart(2,"0");
|
|
|
|
const getCurrentTime = () => {
|
|
const now = new Date();
|
|
let hours = now.getHours();
|
|
const ampm = (hours < 12) ? "AM" : "PM";
|
|
if (hours > 12) hours = hours - 12;
|
|
return `${padStart(hours)}:${padStart(now.getMinutes())} ${ampm}`;
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// get canvas and context
|
|
const canvas = document.querySelector("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// configure text
|
|
ctx.font = "40px serif";
|
|
ctx.strokeStyle = "purple";
|
|
const textWidth = 160;
|
|
const textHeight = 25;
|
|
|
|
// set variables for tracking movement of text on screen
|
|
let x = 0;
|
|
let xIncrement = 2;
|
|
|
|
let y = textHeight; // offset text height since x and y are at lower left corner of text
|
|
let yIncrement = 2;
|
|
|
|
const move = () => {
|
|
// clear previous and draw new
|
|
|
|
|
|
// reverse x direction if at either side of canvas
|
|
|
|
|
|
// reverse y direction if at top or bottom of canvas
|
|
|
|
|
|
// calculate new x and y values for next frame
|
|
|
|
|
|
// continue animation
|
|
|
|
};
|
|
|
|
// start animation;
|
|
requestAnimationFrame(move);
|
|
}); |