JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts
|
Verwenden Sie Leinwand, um eine bunte Uhr zu schreiben! 1. Titel(1) Sie erhalten einen Uhrenkasten und sollen auf das Blatt eine Uhr zeichnen und daraus die aktuelle Systemzeit des Computers ermitteln? (Der Stil ist nicht auf h5 beschränkt) 2. Ideen (1) Zunächst müssen wir die Grafiken im Canvas-Element vollständig verstehen und wissen, wie man Liniensegmente, Kreise, Stundenzeiger, Minutenzeiger und Sekundenzeiger zeichnet. 3. Effektanzeigediagramm
4. Schreiben
Zeit gewinnen: Aktuelle Systemzeit abrufen: Verwenden Sie das Zeitobjekt, um die aktuelle genaue Zeit abzurufen. Da die Zeit keine Ganzzahl ist, müssen wir die Zeit in eine Gleitkommazahl umwandeln. Um den nachfolgenden Timeraufruf zu erleichtern, gibt es derzeit keine 13, 14, 15 ... Daher verwenden wir einen ternären Ausdruck, um das 24-Stunden-System in ein 12-Stunden-System umzuwandeln.
Da die Minutenskala mit der Stundenskala identisch ist, erkläre ich sie kurz am Beispiel der Stundenskala:
Stundenzeigerzeichnung (Stundenzeiger und Minutenzeiger sind grundsätzlich gleich):
Zeichnen Sie die Mitte des Zifferblatts:
Zeit zum Zeichnen von Text: Die Systemzeit wurde oben ermittelt, wir müssen nur noch ihren Stil und ihre Position festlegen und sie auf der Uhrseite rendern! 5. Referenzcodeblock
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<canvas id="Uhr" Breite="500" Höhe="500" ></canvas>
<Skript>
var canvas = document.getElementById("Uhr");
var Kontext = Canvas.getContext("2d");
// Leinwand.Stil.Hintergrundfarbe=getRandom()
Funktion drawClock(){
//Leinwand löschen context.clearRect(0,0,canvas.width,canvas.height)
//Zeit abrufen var now = new Date()
var Sekunde = jetzt.getSeconds()
var minute = jetzt.getMinutes()
var Stunde1 = jetzt.getHours()
var Stunde=Stunde1+Minute/60; //Konvertiere das 24-Stunden-System in das 12-Stunden-System und verwende den Gleitkommatyp Stunde=Stunde>12?Stunde-12:Stunde;
var time=now.toLocaleString() //Gesamtzeit abrufen //Dialcontext.beginPath() zeichnen //Start pathcontext.strokeStyle=getRandom() //Linienfarbecontext.lineWidth=8 //Liniendickecontext.arc(250,250,200,0,360,false)
Kontext.Strich()
context.closePath() //Pfad beenden //Zeitskala zeichnen for(var i=0;i<12;i++){
context.save() //Den aktuellen Canvas-Status speichern context.translate(250,250) //Den Ursprung des Canvas auf die Mitte des Canvas zurücksetzen context.lineWidth=3;
context.rotate(Math.PI/180*30*i) //Drehwinkel der Leinwand festlegen. Der Parameter ist Radiant Math.PI/180*30
Kontext.BeginPath()
Kontext.StrokeStyle = getRandom()
context.moveTo(0,-180) //Startposition context.lineTo(0,-195) //Endposition context.stroke()
Kontext.Pfad schließen()
Kontext.wiederherstellen()
}
//Zeichne die Skala für (var i=0;i<60;i++){
context.save() //Den aktuellen Canvas-Status speichern context.translate(250,250) //Den Ursprung des Canvas auf die Mitte des Canvas zurücksetzen context.lineWidth=1;
context.rotate(Math.PI/180*6*i) //Stellen Sie den Rotationswinkel der Leinwand ein, der Parameter ist Radiant Math.PI/180*30
Kontext.BeginPath()
Kontext.StrokeStyle = getRandom()
context.moveTo(0,-188) //Startposition context.lineTo(0,-195) //Endposition context.stroke()
Kontext.Pfad schließen()
Kontext.wiederherstellen()
}
//Stundenzeiger context.save()
Kontext.Zeilenbreite=5;
Kontext.StrokeStyle = getRandom()
Kontext.Übersetzen(250,250)
Kontext.rotieren(Stunde*30*Math.PI/180)
Kontext.BeginPath()
Kontext.moveTo(0,10)
Kontext.lineTo(0,-100)
Kontext.Strich()
Kontext.Pfad schließen()
Kontext.wiederherstellen()
//Minutenzeiger context.save()
Kontext.Zeilenbreite=3;
Kontext.StrokeStyle = getRandom()
Kontext.Übersetzen(250,250)
Kontext.rotieren(Minute*6*Math.PI/180)
Kontext.BeginPath()
Kontext.moveTo(0,15)
Kontext.lineTo(0,-130)
Kontext.Strich()
Kontext.Pfad schließen()
Kontext.wiederherstellen()
//Aus zweiter Hand context.save()
Kontext.Zeilenbreite=1;
Kontext.StrokeStyle = getRandom()
Kontext.Übersetzen(250,250)
Kontext.rotieren(Sekunde*6*Math.PI/180)
Kontext.BeginPath()
Kontext.moveTo(0,15)
Kontext.lineTo(0,-170)
Kontext.Strich()
Kontext.Pfad schließen()
Kontext.wiederherstellen()
//Wählen Sie das Zentrum context.beginPath()
Kontext.Zeilenbreite=1;
Kontext.fillStyle="rot"
Kontext.arc(250,250,4,0,360,false)
Kontext.Füllen()
Kontext.Pfad schließen()
//Textzeit zeichnen context.font="18px Songti Bold"
Kontext.fillStyle = getRandom()
Kontext.Fülltext(Zeit,160,150)
}
zeichneUhr()
setzeIntervall(zeichneUhr,1000)
Funktion getRandom(){
var col "=";
für(var i=0;i<6;i++){
col+=Math.round(Math.random()*16).toString(16)
}
Rücksprungspalte
}
</Skript>
</body>
</html> 6. Zusammenfassung Beim Erlernen von Canvas müssen wir die Zeichenmethoden im Canvas-Element vollständig verstehen und dann mehr üben, damit wir diese Methoden klar kennen und sie verwenden können, ohne uns damit zu fremd zu sein. Kommen Sie ohne weiteres und probieren Sie es aus! Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Installations-Tutorial für die ZIP-Archivversion von MySQL 5.7
>>: So zeigen Sie die IP-Adresse des Docker-Containers an
Artikel empfehlen
Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML
Die folgenden Attribute sind nicht sehr browserkom...
Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen
1|0 Kompilieren Sie den Kernel (1) Führen Sie den...
Frage zur Webseitenerstellung: Bilddateipfad
Dieser Artikel stammt ursprünglich von 123WORDPRE...
So verwenden Sie ein Domestic Image Warehouse für Docker
1. Problembeschreibung Aus bestimmten Gründen ist...
Detaillierte Erklärung der Zusammenhänge zwischen Bildformat und Design im Webdesign
Warum möchte ich den Inhalt in diesem Bereich orga...
Detaillierte Erläuterung der Vorgänge und Implementierungen im Zusammenhang mit dem HTML-Druck
Das Prinzip besteht darin, die Methode window.pri...
CSS3 + HTML5 + JS realisiert den Schrumpf- und Expansionsanimationseffekt eines Blocks
Als ich kürzlich an einem Projekt arbeitete, stel...
Koexistenz von Python2 und Python3 unter einem CentOS7-System
Der erste Schritt besteht darin, die Versionsnumm...
Die umfassendste Erklärung des Sperrmechanismus in MySQL
Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...
10 Arten von Ladeanimationen mit CSS3 implementiert. Eine auswählen und los geht‘s?
Wirkung html <Text> <div Klasse="In...
Lösung für die Meldung „Die exklusive Sperre dieser Konfigurationsdatei ist fehlgeschlagen“ auf der virtuellen VMware-Maschine
Nach einem abnormalen Herunterfahren von VMware w...
Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse
So kopieren Sie schnell eine Tabelle Erstellen Si...
Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript
Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...
So konfigurieren Sie ein Jupyter-Notebook im Docker-Container
Das Jupyter-Notebook wird unter dem Docker-Contai...
Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern
Ergebnis:Implementierungscode html <ul Klasse=...