В этой статье вы узнаете, как сделать круглые canvas часы, в низу сможете скачать код программы, она была взята со этого сайта.
Если хотите сделать обычные часы, то посмотрите статью
«Часы на JavaScript».
Делаем часы на Canvas:
Первым делом нужно объявить нужные функцию в которой будет код всей программы.
1 2 3 | function clockPainting() { ... } |
Внутри объявляем переменные, которые будут хранить в себе секунды, минуты и часы, в конце берём canvas элемент и делаем его для 2D рисования.
1 2 3 4 5 6 7 8 9 | let now = new Date(); // Создаём объект время let sec = now.getSeconds(); // Получаем секунды let min = now.getMinutes(); // Получаем минуты let hr = now.getHours(); // Получаем часы // Берём Canvas элемент и делаем его для 2D let ctx = document.getElementById("canvas").getContext("2d"); // Сохраняем текущий контекст в стэк ctx.save(); |
Дальше уже делаем базовые настройки canvas, чтобы всё правильно отображалось.
1 2 3 4 | ctx.clearRect(0,0,150,150); // Очищаем Canvas ctx.translate(75, 75); // Перемешаем центр часов в центр Canvas ctx.scale(0.4,0.4); // Уменьшаем размер отображения Canvas ctx.rotate(-Math.PI/2); // Отзеркаливание Canvas |
Тут делаем базовую настройку от рисовки, в начале всё поле, потом центром для отображения делаем центр canvas элемента, уменьшаем размер всей рисовки, это нужно для более компактного размера и чтобы часы за границу не выходили, поседение это отзеркаливание, чтобы стрелки на часах были в правильной позиции.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ctx.strokeStyle = "black"; // Задаём цвет обводки чёрный ctx.fillStyle = "black"; // Задаём цвет заливки чёрный ctx.lineWidth = 8; // Задаём ширину линий ctx.lineCap = "round"; // определяем как будут выглядеть концы линий ctx.save(); // Сохраняем в контекст ctx.beginPath(); // Ставим кисть // Рисуем циферблат for (var i = 0; i < 12; i++) { ctx.rotate(Math.PI/6); ctx.moveTo(100,0); ctx.lineTo(120,0); } ctx.stroke(); // Нарисовали то, что ранее описали ctx.restore(); // Достаем последний сохраненный контекст из стэка ctx.save(); // Сохранение в стэки |
В этой части кода делаем циферблат, пока без стрелок, пока только полоски которые будут указывать на время, вначале из настраиваем, потом отрисовываем внутри цикла for.
Рисуем всё что мы описали раньше, достаём всё ранее сохранённое в стэки и снова сохраняем в стеки.
1 2 3 4 5 6 7 8 9 10 11 | // Минутная стрелка 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(); // Сохраняем в стэк |
В этом коде делаем минутную стрелку, в конце опять всё сохраняем в стэк.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Cекундная стрелка 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.restore(); // Восстановление состояния из стэка |
Это последний кусочек кода в функции clockPainting(), и тут мы точно по такому же принципу, как и в предыдущем кусочки, но уже делаем секундную стрелку.
Теперь всё это нужно добавить в интервал в одну секунду.
1 2 3 4 5 | // Событие загрузки страницы window.addEventListener('load', function () { // Создаём интервал setInterval(clockPainting, 1000); }); |
В начале добавляем отслеживание события загрузки страницы, это нужно чтобы вес canvas нормально погрузился, потом уже внутри делаем интервал, в котором используем функцию часов, вот что получилось.
Вывод:
В этой статье вы прочитали как сделать Canvas часы, как видите кода достаточно много, но он не сильно сложный.
Подписываетесь на соц-сети:
Оценка:
Загрузка...