Последние записи

made in programmersforum 3

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

23rd
Дек

Часы на JavaScript

Posted by Chas under JavaScript, Исходники

Ципихович Эндрю
такие не подойдут:

<!--Рисование анимированных часов с использованием Canvas API-->

<html>

<head>

<title>Демонстрация часов Canvas </title>

<script>

// Ожидание загрузки в браузер

window.onload = function() {

// Рисование часов

clock();

// и перерисовка часов по прошествии каждой секунды

setInterval(clock, 1000);

};

function clock() {

// Получение текущей даты и времени

var now = new Date();

var sec = now.getSeconds();

var min = now.getMinutes();

var hr = now.getHours();

hr = hr >= 12 ? hr - 12 : hr;

// Получение контекста элемента <canvas>

var ctx = document.getElementById('canvas').getContext('2d');

ctx.save();

// Инициализация холста для рисования

ctx.clearRect(0,0,150,150);

// Когда мы рисуем в 0,0, мы фактически рисуем в 75,75

ctx.translate(75,75);

// При рисовании линии 100px, фактически рисуется линия в 40px

ctx.scale(0.4,0.4);

// Начало вращения курсора с 12:00

ctx.rotate(-Math.PI/2);

// Инициализация свойств рисунка

ctx.strokeStyle = "black";

ctx.fillStyle = "black";

ctx.lineWidth = 8;

ctx.lineCap = "round";

// Часовые метки

ctx.save();

ctx.beginPath();

// Для каждого часа

for ( var i = 0; i < 12; i++ ) {

// Вращение холста на 1/12 пути

// (помните: длина окружности = 2 * PI)

ctx.rotate(Math.PI/6);

// Перемещение курсора почти к краю холста

ctx.moveTo(100,0);

// и рисование короткой черточки (20px)

ctx.lineTo(120,0);

}

ctx.stroke();

ctx.restore();

// Минутные метки

ctx.save();

// Эти черточки будут меньше часовых

ctx.lineWidth = 5;

ctx.beginPath();

// Для каждой минуты

for ( var i = 0; i < 60; i++ ) {

// кроме тех, что совпадают с часами

if ( i % 5 != 0 ) {

// Перемещение курсора чуть дальше

ctx.moveTo(117,0);

// И рисование короткой линии (3px)

ctx.lineTo(120,0);

}

// Вращение холста 1/60 пути по кругу

ctx.rotate(Math.PI/30);

}

ctx.stroke();

ctx.restore();

// Рисование часовой стрелки

ctx.save();

// Вращение холста на текущую позицию

ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min

+ (Math.PI/21600) * sec )

// Эта линия должна быть шире

ctx.lineWidth = 14;

ctx.beginPath();

// Начало рисования с выходом за пределы центра (чтобы

// было похоже на часовую стрелку)

ctx.moveTo(-20,0);

// и рисование почти до часовых черточек

ctx.lineTo(80,0);

ctx.stroke();

ctx.restore();

// Рисование минутной стрелки

ctx.save();

// Вращение холста на текущую минутную позицию

ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )

// Эта линия будет тоньше, чем часовая стрелка

ctx.lineWidth = 10;

ctx.beginPath();

// Но она также и длиннее, поэтому ее нужно установить чуть

// назад

ctx.moveTo(-28,0);

// и нарисовать чуть длиннее

ctx.lineTo(112,0);

ctx.stroke();

ctx.restore();

// Рисование секундной стрелки

ctx.save();

// Вращение холста на текущую секундную позицию

ctx.rotate(sec * Math.PI/30);

// Эта линия должна быть красноватой

ctx.strokeStyle = "#D40000";

ctx.fillStyle = "#D40000";

// и более тонкой, чем другие стрелки

ctx.lineWidth = 6;

ctx.beginPath();

// А также больше выступать назад

ctx.moveTo(-30,0);

// но быть короче

ctx.lineTo(83,0);

ctx.stroke();

ctx.restore();

// Внешняя синяя окружность

ctx.save();

// Обрамление будет широким

ctx.lineWidth = 14;

// и синеватым

ctx.strokeStyle = '#325FA2';

ctx.beginPath();

// Рисование полной окружности, отступающей от центра

// на 142px

ctx.arc(0,0,142,0,Math.PI*2,true);

ctx.stroke();

ctx.restore();

ctx.restore();

}

</script>

</head>

<body>

<canvas id="canvas" height="150" width="150"></canvas>

</body>

</html>