TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich eine analoge Uhr mit HTML5 Canvas?

9

Das HTML5 Canvas-Element wird verwendet, um die mit JavaScript gezeichneten Grafiken aufzunehmen. Canvas-Tag wird nur verwendet, um das Element als Platzhalter oder Container zu halten. Die eigentlichen Grafiken werden mit JavaScript gezeichnet. In diesem Artikel zeichnen wir eine einfache analoge Uhr mit JavaScript und platzieren sie auf einer Seite mit Canvas-Container.

Verwandte: Wie erstelle ich ein rotierendes Würfel-Widget mit CSS?

Analoge Uhr mit HTML5 Canvas und JavaScript

Dies ist ein einfaches Uhr-Widget mit Stunden-, Minuten- und Sekundenzeigern. Die Zeit beginnt mit der Zeit Ihres Computers, wenn das Widget geladen wird. Hier ist eine Demo, wie die Uhr aussehen wird:

Das Analoguhr-Widget besteht aus zwei Teilen – JavaScript und Canvas-Container.

JavaScript für Analoguhr

JavaScript wird verwendet, um einen Kreis, Zeiger, Uhrzeit und Zeigerbewegungen wie unten beschrieben zu erstellen. Mathematische Berechnungen werden verwendet, um die 360 ​​Grad des Kreises zu teilen, damit sich die Zeiger entsprechend drehen können.

<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>

Sie können dieses Skript auf der Seite mit …-Tags verwenden, wie im Code angegeben. Andernfalls erstellen Sie eine .js-Datei und fügen Sie den Inhalt ohne Skript-Tags hinzu und verknüpfen Sie die Skriptdatei im Fußzeilenbereich der Seite mit dem Code <script src="script.js">.

HTML für analoge Uhr

Unten ist der HTML-Code für die analoge Uhr, um einen Canvas-Container zu erstellen. Sie können diesen Code überall auf Ihrer Seite einfügen.

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

Anpassen des Widgets

Die analoge Uhr kann mit den folgenden Optionen angepasst werden:

  • Ändern Sie die Farbe und Länge der Stunden-, Minuten- und Sekundenzeiger auf jeden erforderlichen Wert, der mit der drawPointer-Funktion definiert wird.
  • Ändern Sie die Größe und Schriftart der mit „ctx.font = „26px Verdana”;” definierten Zahlen.
  • Die Farbe der Zahlen innerhalb der Uhr wird mit „ctx.fillStyle = „brown”;” als braun definiert. die in jede beliebige Farbe geändert werden kann.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen