Canvas Clock Case

/ / get the Canvas
/ * *@type {HTMLCanvasElement} * /
let Canvas = document.getElementById("Canvas");
// Create a canvas
let ctx = Canvas.getContext('2d');

// Draw the center point
const initCentre = function initCentre() {
    // Draw the center point
    ctx.beginPath();
    ctx.save()
    ctx.translate(450.300);
    ctx.arc(0.0.10.0.Math.PI * 2);
    ctx.fill();
    ctx.restore()
}

// Draw the dial
const initPlate = function initPlate() {
    // Start drawing
    ctx.beginPath();
    ctx.save()
    ctx.lineWidth = 5;
    / / center
    ctx.translate(450.300);
    / / draw circles
    ctx.arc(0.0.200.0.Math.PI * 2);
    / / to draw
    ctx.stroke();
}

// Draw the dial scale
const initScale = function initScale() {
    // Draw the numbers
    ctx.beginPath();
    let scaleArr = [3.4.5.6.7.8.9.10.11.12.1.2];
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = "15px Arial";
    scaleArr.forEach((item, i) = > {
        let x = 175 * Math.cos((Math.PI * 2) / 12 * i),
            y = 175 * Math.sin((Math.PI * 2) / 12 * i);
        ctx.fillText(item, x, y);
    })
    ctx.stroke();

    // Draw small dots
    ctx.beginPath();
    let i = 0;
    for (; i < 60; i++) {
        ctx.beginPath();
        let x = 190 * Math.cos((Math.PI * 2) / 60 * i),
            y = 190 * Math.sin((Math.PI * 2) / 60 * i);
        i % 5= =0 ? ctx.arc(x, y, 4.0.Math.PI * 2) : ctx.arc(x, y, 2.0.Math.PI * 2); ctx.fill(); }}// Draw the clock minute second hand
const drawHours = function drawHours(h, m) {
    let angle = (Math.PI * 2 / 12 * h) + (Math.PI * 2 / 12 / 60 * m) || 0;
    ctx.beginPath();
    ctx.rotate(angle);
    ctx.strokeStyle = "pink"
    ctx.lineWidth = 7;
    ctx.moveTo(0.0);
    ctx.lineTo(0, -100);
    ctx.stroke();
    ctx.restore()
}

const drawMinute = function drawMinute(m) {
    let angle = (Math.PI * 2 / 60 * m) || 0;
    ctx.save();
    ctx.beginPath();
    ctx.rotate(angle);
    ctx.strokeStyle = "red"
    ctx.lineWidth = 5;
    ctx.moveTo(0.0);
    ctx.lineTo(0, -130);
    ctx.stroke();
    ctx.restore()
}

const drawSecond = function drawSecond(s) {
    let angle = (Math.PI * 2 / 60 * s) || 0;
    ctx.save();
    ctx.beginPath();
    ctx.rotate(angle);
    ctx.strokeStyle = "yellow"
    ctx.lineWidth = 3;
    ctx.moveTo(0.0);
    ctx.lineTo(0, -150);
    ctx.stroke();
    ctx.restore()
}

/ / start
function start() {
    setInterval(() = > {
        ctx.clearRect(0.0.900.600)
        let date = new Date(),
            h = date.getHours(),
            m = date.getMinutes(),
            s = date.getSeconds();
        initPlate();
        initScale();
        drawSecond(s);
        drawMinute(m);
        drawHours(h, m);
        initCentre();
    }, 1000)
}

start()


Copy the code