<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Рисуем часы на элементе canvas в JavaScript

Рисуем часы на элементе canvas в JavaScript

Доброго времени суток! В данной примере я покажу Вам как можно создать виджет часов в JavaScript. Рисовать часы будем на HTML-элементе canvas.

Код


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Clock</title>

    <style>

        body {
            display: flex;
            place-content: center;
        }

        canvas {

        }
    </style>
</head>

<body>

    <!-- Добавляем HTML-элемент <canvas> на свою страницу: -->

    <canvas id="canvas" width="400" height="400" style="background-color:rgb(5, 33, 211)"></canvas>

    <script>


        // Создаем объект холста (let canvas) из элемента холста HTML:
        const canvas = document.getElementById("canvas");

        // Создаем 2D-объект для рисования на холсте:
        const ctx = canvas.getContext("2d");

        // Рассчитывем радиус часов, относительно высоты холста:
        let radius = canvas.height / 2;

        // Переназначаем положение объекта рисования в центр холста:
        ctx.translate(radius, radius);

        // Уменьшаем радиус часов (до 90%), чтобы лучше отобразить часы внутри холста:
        radius = radius * 0.90;

        // рисуем часы:
        setInterval(drawClock, 1000);

        function drawClock() {
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
        }

        // рисуем циферблат
        function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
            drawTime(ctx, radius);
        }

        function drawFace(ctx, radius) {
            let grad;

            // циферблат
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();

            // окружность циферблата
            grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
            grad.addColorStop(0, '#777');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1, '#777');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();

            // точка в центре
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = '#00f';
            ctx.fill();
        }

        // цифры на часах
        function drawNumbers(ctx, radius) {
            let ang;
            let num;
            // размер цифр на циферблате
            ctx.font = radius * 0.20 + "px arial";

            // установливаем выравнивание текста по середине и центру позиции печати:
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";

            // рисуем цифры по окружности
            for (num = 1; num < 13; num++) {
                angle = num * Math.PI / 6;
                ctx.rotate(angle);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-angle);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(angle);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-angle);
            }
        }


        function drawTime(ctx, radius) {
            let now = new Date();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();
            // часовая стрелка
            hour = hour % 12;
            hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
            drawHand(ctx, hour, radius * 0.5, radius * 0.07);
            // минутная
            minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
            drawHand(ctx, minute, radius * 0.8, radius * 0.07);
            // секундная
            second = (second * Math.PI / 30);
            drawHand(ctx, second, radius * 0.9, radius * 0.02);
        }

        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = "round";
            ctx.moveTo(0, 0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }

    </script>
</body>

</html>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.