js implementiert eine auf Canvas basierende Uhrkomponente

Canvas war schon immer ein unverzichtbares Tag-Element zum Zeichnen von Grafiken in der Front-End-Entwicklung, z. B. zum Komprimieren hochgeladener Bilder, Rubbelkarten, Postererstellung, Diagramm-Plug-Ins usw. Viele Leute werden während des Interviewprozesses gefragt, ob sie jemals mit dem Zeichnen von Canvas-Grafiken in Berührung gekommen sind.

Definition

Das Canvas-Element dient zum Zeichnen von Grafiken, was über Skripte (normalerweise JavaScript) erfolgt.
Das Canvas-Tag ist nur ein Grafikcontainer. Zum Zeichnen der Grafiken müssen Sie Skripte verwenden.

Browserunterstützung

Unterstützung für Internet Explorer 9, Firefox, Opera, Chrome und Safari

In diesem Artikel wird eine Uhrkomponente verwendet, um Sie mit der Canvas-API vertraut zu machen.

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Leinwanduhr</title>
<Stil>
*{Rand:0;Padding:0;}
body{text-align:center;padding-top:100px;}
</Stil>
</Kopf>
<Text>
<canvas id="Uhr" Breite="200px" Höhe="200px"></canvas>
<Skript>
(Funktion (Gewinn) {
	Funktion DrawClock(Optionen){
		dies.canvas = Optionen.el;
		this.ctx = this.canvas.getContext('2d'); //Die Methode gibt eine Umgebung zum Zeichnen auf der Leinwand zurück this.width = this.ctx.canvas.width;
		diese.Höhe = diese.ctx.canvas.Höhe;
		dies.r = diese.Breite / 2;
		dies.rem = diese.Breite / 200;
		diese.ziffern = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

	  var selbst = dies;
	  selbst.init();
	  setzeIntervall(Funktion(){
	  	selbst.init();
	  }, 1000);
	}

	DrawClock.prototype = {
		init: Funktion(){
			var ctx = diese.ctx;
			ctx.clearRect(0, 0, this.width, this.height); //Löschen Sie die angegebenen Pixel im angegebenen Rechteck var now = new Date();
			var Stunden = jetzt.getHours();
			var Minuten = jetzt.getMinutes();
			var Sekunden = jetzt.getSeconds();

			var Stunde = Stunden >= 12? Stunden - 12: Stunden;
			var Minute = Minuten + Sekunden / 60;

			dies.drawBackground();
			this.drawHour(Stunde, Minute);
			this.drawMinute(minute);
			this.drawSecond(Sekunden);
			dies.drawDot();
			ctx.wiederherstellen();
		},
		Hintergrund zeichnen: Funktion(){
			var ctx = diese.ctx;
			var selbst = dies;
			ctx.speichern();
			ctx.translate(this.r, this.r); //Ordnen Sie die Position (0,0) auf der Leinwand neu zu ctx.beginPath();
			ctx.Linienbreite = 8 * this.rem;
			ctx.arc(0, 0, this.r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); //Einen Bogen/eine Kurve erstellen (wird zum Erstellen eines Kreises oder Teilkreises verwendet)
			ctx.stroke();
			ctx.font = 16 * this.rem + "px Arial"; // Aktuelle Schrifteigenschaften des Textinhalts festlegen oder zurückgeben ctx.textAlign = "center"; // Aktuelle Ausrichtung des Textinhalts festlegen oder zurückgeben ctx.textBaseline = "middle"; // Aktuelle Textgrundlinie festlegen oder zurückgeben, die beim Zeichnen von Text verwendet wird this.digits.forEach(function(number, i){
				var rad = 2 * Math.PI / 12 * i;
				var x = Math.cos(rad) * (self.r - 33 * self.rem);
				var y = Math.sin(rad) * (self.r - 33 * self.rem);
				ctx.fillText(Zahl, x, y); //Den „gefüllten“ Text auf die Leinwand zeichnen });

			//Minutenskala, 6 Grad pro Minute
			für (var i = 0; i < 60; i++){
				ctx.save(); //Speichert den Zustand der aktuellen Umgebung ctx.rotate(6 * i * Math.PI / 180); //Dreht die aktuelle Zeichnung ctx.beginPath(); //Startet einen Pfad oder setzt den aktuellen Pfad zurück ctx.moveTo(0, -82 * this.rem); //Verschiebt den Pfad zum angegebenen Punkt auf der Leinwand, ohne eine Linie zu erstellen ctx.lineTo(0, -87 * this.rem); //Fügt einen neuen Punkt hinzu und erstellt dann eine Linie von diesem Punkt zum letzten angegebenen Punkt auf der Leinwand ctx.closePath(); //Erstellt einen Pfad vom aktuellen Punkt zurück zum Startpunkt ctx.strokeStyle = '#000'; //Setzt oder gibt die für den Strich verwendete Farbe, den Farbverlauf oder den Modus zurück ctx.lineWidth = 1 * this.rem; //Setzt oder gibt die aktuelle Linienbreite zurück ctx.stroke(); //Zeichnet einen definierten Pfad ctx.restore(); //Gibt den zuvor gespeicherten Pfadzustand und die Eigenschaften zurück }
			//Stundenskala, jede Stunde um 30 Grad drehen
			für (var i = 0; i < 12; i++){
				ctx.speichern();
				ctx.rotate(30 * i * Math.PI / 180);
				ctx.beginPath();
				ctx.moveTo(0, -79 * this.rem);
				ctx.lineTo(0, -87 * this.rem);
				ctx.closePath();
				ctx.strokeStyle = "#000";
				ctx.Linienbreite = 2 * this.rem;
				ctx.stroke();
				ctx.wiederherstellen();
			}
		},
		drawHour: Funktion (Stunde, Minute) {
			var ctx = diese.ctx;
			ctx.speichern();
			ctx.beginPath();
			var hRad = 2 * Math.PI / 12 * Stunde;
			var mRad = 2 * Math.PI / 12 / 60 * Minute;
			ctx.rotate(hRad + mRad);
			ctx.Linienbreite = 6 * this.rem;
			ctx.lineCap = "round"; //Endpunktstil der Linie festlegen oder zurückgeben ctx.moveTo(0, 10 * this.rem);
			ctx.lineTo(0, -this.r / 2);
			ctx.stroke();
			ctx.wiederherstellen();
		},
		drawMinute: Funktion(Minute){
			var ctx = diese.ctx;
			ctx.speichern();
			ctx.beginPath();
			var rad = 2 * Math.PI / 60 * Minute;
			ctx.rotate(rad);
			ctx.Linienbreite = 3 * this.rem;
			ctx.lineCap = "rund";
			ctx.moveTo(0, 10 * dies.rem);
			ctx.lineTo(0, -this.r + 26 * this.rem);
			ctx.stroke();
			ctx.wiederherstellen();
		},
		drawSecond: Funktion (Sekunde) {
			var ctx = diese.ctx;
			ctx.speichern();
			ctx.beginPath();
			ctx.fillStyle = "#c14543";
			var rad = 2 * Math.PI / 60 * Sekunde;
			ctx.rotate(rad);
			ctx.moveTo(-3 * dies.rem, 20 * dies.rem);
			ctx.lineTo(3 * dies.rem, 20 * dies.rem);
			ctx.lineTo(1, -this.r + 26 * this.rem);
			ctx.lineTo(-1, -this.r + 26 * this.rem);
			ctx.fill(); //Aktuelle Zeichnung (Pfad) füllen
			ctx.wiederherstellen();
		},
		drawDot: Funktion(Minute){
			var ctx = diese.ctx;
			ctx.beginPath();
			ctx.fillStyle = "#fff";
			ctx.arc(0, 0, 3 * this.rem, 0, 2 * Math.PI, false);
			ctx.fill();
		}
	};

    win.DrawClock = Zeichenuhr;
})(Fenster);

neue DrawClock({el: document.getElementById("Uhr")});
</Skript>
</body>
</html>

Solange Sie Hügel und Täler im Kopf haben, können Sie zwei Morgen Land bewirtschaften! Die Canvas-Uhr verwendet die meisten APIs in Canvas. Indem Sie die Codeimplementierung der Canvas-Uhr lernen, können Sie die Eigenschaften und Methoden von Canvas verstehen. Gleichzeitig werden beim Realisieren des Uhreffekts die geometrischen Modelle der Sinus-, Cosinus- und Radiant-Berechnungsmethoden in der Mathematik verwendet, und der Spaß am Mathematiklernen in der Vergangenheit wird wiederbelebt. Man könnte sagen, man schlägt zwei Fliegen mit einer Klappe.

Das Uhreffektdiagramm sieht wie folgt aus:

Oben finden Sie Einzelheiten zur Implementierung der auf Canvas basierenden Uhrkomponente in js. Weitere Informationen zur von Canvas implementierten Uhrkomponente finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

JavaScript Canvas-Textuhr
Verwenden von js und Canvas zur Realisierung eines Uhreffekts
JavaScript-Canvas-Animation zum Erzielen eines Uhreffekts
JavaScript Canvas schreibt eine farbenfrohe Web-Uhr
Beispiel für eine Uhrfunktion zum Zeichnen auf einer Leinwand in JavaScript und HTML5
JS+H5 Canvas zum Erzielen eines Uhreffekts
JS+Canvas zeichnet dynamische Uhreffekte
JavaScript Canvas zeichnet einen kreisförmigen Uhreffekt
js Canvas zeichnet einen kreisförmigen Uhreffekt
Kalenderuhrgehäuse-Sharing implementiert durch js Canvas
js Canvas realisiert runde Uhr Tutorial

<<: Einfache Implementierung zum Ignorieren von Fremdschlüsseleinschränkungen beim Löschen von MySQL-Tabellen

>>: Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle

Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL

js implementiert eine auf Canvas basierende Uhrkomponente

Definition

Browserunterstützung

Einfache Schritte zum Konfigurieren des Nginx-Reverse-Proxys mit SSL

MySQL versteht kurz, wie "order by" funktioniert

Detailliertes Tutorial zur Installation und Konfiguration von MySql5.7 unter Ubuntu 20.04

10 schlechte Angewohnheiten, die Sie bei Docker-Containeranwendungen vermeiden sollten

Mit vsftp einen FTP-Server unter Linux aufbauen (mit Parameterbeschreibung)

So stellen Sie ein Angular-Projekt mit Docker bereit

Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

Zusammenfassung der MySql-Import- und Exportmethoden mit mysqldump

Detailliertes Tutorial zur Installation von mysql5.7.18 auf centos7.3

So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung

Artikel empfehlen

Müssen Designer das Programmieren lernen?

Uniapp realisiert gleitenden Scoring-Effekt

Lösen Sie das Problem der Docker-Protokollmontage

Detaillierte Erklärung der Mixins in Vue.js

Einführung in das Versionsverwaltungstool Rational ClearCase

Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen

Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können

Details zur MySQL-Sortierfunktion

CSS3 erzielt verschiedene Randeffekte

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Detaillierte Erklärung mehrerer Möglichkeiten zum Entfernen der Lücke zwischen Inline-Blockelementen in CSS

Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten

Detaillierte Erläuterung der Grundkonfiguration des automatisierten Testens von Vue-Jest

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Detaillierte Erläuterung der vorkompilierten CSS-Sprachen und ihrer Unterschiede