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

So zeigen Sie Div auf einem Objekt an, ohne durch die Objektanimation blockiert zu werden

js implementiert eine auf Canvas basierende Uhrkomponente

Definition

Browserunterstützung

So zeigen Sie Div auf einem Objekt an, ohne durch die Objektanimation blockiert zu werden

Zwei Methoden zur Implementierung der MySQL-Gruppenzählung und Bereichsaggregation

Lernen Sie MySQL Index Pushdown in fünf Minuten

CentOS 7 kann nach dem Ändern der Netzwerkkarte nicht auf das Internet zugreifen

Eine detaillierte Einführung in die CSS-Namensspezifikation BEM von QQtabBar

Detaillierte Erläuterung der CSS BEM-Schreibstandards

Mysql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „And“

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

js Implementierung des Verifizierungscode-Falls

Vue verwendet dynamische Komponenten, um einen TAB-Umschalteffekt zu erzielen

Artikel empfehlen

Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)

Vue+Router+Element zur Implementierung einer einfachen Navigationsleiste

Schreiben Sie einen formellen Blog mit XHTML CSS

Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

Ausführliche Erklärung der Modi und Umgebungsvariablen in Vue CLI

So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Tiefgreifendes Verständnis der Verwendung von CSS clear:both

So fragen Sie JSON in der Datenbank in MySQL 5.6 und darunter ab

Facebooks nahezu perfekte Neugestaltung aller Internetdienste

Foreman Ubuntu16 Schnellinstallation

Ubuntu 18.04 installiert pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

Kleines Paging-Design