Аналоговые часы с HTML5 Canvas и JavaScript »WebNots

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

Аналоговые часы с холстом 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>

Вы можете использовать этот сценарий на странице с тегами .

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

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

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

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

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