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

Nginx-Reverseproxy und Lastausgleichspraxis

js implementiert eine auf Canvas basierende Uhrkomponente

Definition

Browserunterstützung

Nginx-Reverseproxy und Lastausgleichspraxis

Lösung für das Jitter-Problem beim CSS3-Transformationsübergang

Linux-Datenträgerverwaltung – LVM-Nutzung

Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware

JavaScript zur Implementierung der Webversion des Schlangenspiels

Eine kurze Diskussion über die Implementierung von Fuzzy-Abfragen mit Platzhaltern in MySQL

Einführung in die Parameter und Regeln für reguläre Ausdrücke bei Nginx

Eine Kurzanleitung zu MySQL-Indizes

Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App

Eine kurze Diskussion über Yahoos 35 Regeln zur Front-End-Optimierung

Artikel empfehlen

jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

Docker-Konfiguration Alibaba Cloud Image Acceleration Pull-Implementierung

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt

So verwenden und begrenzen Sie Requisiten in React

WeChat Mini-Programm: Position des Videofeuers zufällig

Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

So verwenden Sie display:olck/none zum Erstellen einer Menüleiste

Detaillierte Erläuterung der Verwendung des Alibaba Cloud-Image-Repository zum Erstellen ausländischer Docker-Images

Ein Artikel zum Verständnis von MySQL Index Pushdown (ICP)

Detaillierte Erläuterung der Verwendung von Docker Commit

Beispielcode zur Implementierung des Verlaufs in Vuex

Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

Ubuntu 18.0.4 installiert MySQL und behebt FEHLER 1698 (28000): Zugriff für Benutzer ''root''@''localhost'' verweigert