TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать аналоговые часы с холстом HTML5?

179

Элемент HTML5 Canvas используется для хранения графики, нарисованной с помощью JavaScript. Тег Canvas используется только для хранения элемента в качестве заполнителя или контейнера. Фактическая графика нарисована с помощью JavaScript. В этой статье мы нарисуем простые аналоговые часы с помощью JavaScript и разместим их на странице с контейнером Canvas.

Связанный: Как создать виджет вращающегося куба с помощью CSS?

Аналоговые часы с холстом HTML5 и JavaScript

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

В виджете аналоговых часов есть две части – JavaScript и контейнер Canvas.

JavaScript для аналоговых часов

JavaScript используется для создания круга, указателей, времени и движений указателя, как показано ниже. Математические вычисления используются для разделения окружности на 360 градусов, чтобы указатели вращались должным образом.

<script type="text/JavaScript"> x=150; y=150; clock=document.getElementById("canvas"); ctx=clock.getContext("2d"); function loop() { time=new Date(); h=time.getHours(); m=time.getMinutes(); s=time.getSeconds(); ctx.beginPath(); ctx.fillStyle="white"; ctx.arc(x,y,140,0,Math.PI*2,true); ctx.fill(); ctx.strokeStyle="red"; ctx.lineWidth=10; ctx.stroke(); drawNumber(); drawPointer(360*(h/12)+(m/60)*30-90,70,"black",10); drawPointer(360*(m/60)+(s/60)*6-90,100,"black",10); drawPointer(360*(s/60)+x-90,120,"red",2); } function drawNumber() { for(n=0;n<12;n++) { d=-60; num = new Number(n+1); str = num.toString(); dd = Math.PI/180*(d+n*30); tx = Math.cos(dd)*120+140; ty = Math.sin(dd)*120+160; ctx.font = "26px Verdana"; ctx.fillStyle = "brown"; ctx.fillText(str, tx, ty); } } function drawPointer(deg,len,color,w) { rad=(Math.PI/180*deg); x1=x+Math.cos(rad)*len; y1=y+Math.sin(rad)*len; ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=w; ctx.moveTo(x,y); ctx.lineTo(x1,y1); ctx.stroke(); } setInterval(loop,500); </script>

Вы можете использовать этот скрипт на странице с… тегами, как указано в коде. В противном случае создайте файл .js и добавьте содержимое без тегов сценария и свяжите файл сценария в разделе нижнего колонтитула страницы, используя код <script src = "script.js">.

HTML для аналоговых часов

Ниже приведен HTML-код аналоговых часов для создания контейнера холста. Вы можете вставить этот код в любое место на своей странице.

<center> <canvas id="canvas" width="300" height="300"></canvas> </center>

Настройка виджета

Аналоговые часы можно настроить с помощью следующих параметров:

  • Измените цвет и длину указателей часов, минут и секунд на любое необходимое значение, определенное с помощью функции drawPointer.
  • Измените размер и шрифт чисел, определенных с помощью «ctx.font =« 26px Verdana »;».
  • Цвет цифр внутри часов определяется как коричневый с помощью «ctx.fillStyle =« brown »;» который можно изменить на любой цвет.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее