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

Як створити аналоговий годинник за допомогою HTML5 Canvas?

1

Елемент Canvas HTML5 використовується для утримання графіки, намальованої за допомогою JavaScript. Тег полотна використовується лише для утримання елемента як заповнювача або контейнера. Фактична графіка малюється за допомогою JavaScript. У цій статті ми намалюємо простий аналоговий годинник за допомогою JavaScript і помістимо його на сторінку з контейнером Canvas.

Пов’язані: Як створити віджет куба, що обертається, за допомогою CSS?

Аналоговий годинник із HTML5 Canvas та 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 =" коричневий ";" який можна змінити на будь -який колір.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі