Аналоговые часы с минимальным дизайном

Нарисуем самые простые часы.

Создадим холст для рисования часов.


<canvas id="clock" width="400" height="400">Canvas</canvas>

Проведём инициализацию холста в сценарии. И сразу создадим функцию, которая соберёт все части часов в одно целое.


const canvas = document.getElementById("clock");
const context = canvas.getContext("2d");

function drawClock() {
    
}

drawClock();

Нарисуем круг.


const MARGIN = 30;
const RADIUS = canvas.width / 2 - MARGIN;

function drawCircle() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2,
            RADIUS, 0, Math.PI * 2, true);
    context.stroke();
}

function drawClock() {
    drawCircle();
    // далее подставляем другие функции
}

На данном этапе мы получили круг.

Разместим по окружности числа от 1 до 12.


const NUMERAL_SPACING = 20;
const HAND_RADIUS = RADIUS + NUMERAL_SPACING;
const FONT_HEIGHT = 15;

function drawNumerals() {
    var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
    angle = 0,
    numeralWidth = 0;

    numerals.forEach(function(numeral) {
        angle = Math.PI / 6 * (numeral - 3);
    numeralWidth = context.measureText(numeral).width;
    context.fillText(numeral,
            canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) -
            numeralWidth/2,
    canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) +
            FONT_HEIGHT / 3);
    });
}

Рисуем центр часов в виде кружочка.


function drawCenter() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
    context.fill();
}

Теперь рисуем стрелки часов. Одна функция будет рисовать либо часовую либо минутную стрелку либо секундную стрелку, в зависимости от второго параметра. Общая функция задающая линии для стрелок.


const HAND_TRUNCATION = canvas.width / 25;
const HOUR_HAND_TRUNCATION = canvas.width / 10;

function drawHand(loc, isHour) {
    var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
    handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
    context.moveTo(canvas.width / 2, canvas.height / 2);
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
            canvas.height / 2 + Math.sin(angle) * handRadius);
    context.stroke();
}

Определим текущую дату и нарисуем стрелки в соответствии с временем.


function drawHands() {
    var date = new Date;
    var hour = date.getHours();
    hour = hour > 12 ? hour - 12 : hour;
    drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
    drawHand(date.getMinutes(), false, 0.5);
    drawHand(date.getSeconds(), false, 0.2);
}

Мы получили статичное изображение часов. Если обновлять страницу вручную, то можно увидеть, что секундная стрелка меняет свою позицию.

Заставим обновлять экран при помощи браузера.


// drawClock();
context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);

Аналоговые часы с минимальным дизайном

Реклама