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
Tutorial zur Installation von MySQL8 unter Linux CentOS7
1. Installation der RPM-Version Überprüfen Sie, o...
Detaillierter Prozess der Installation und Bereitstellung von OnlyOffice in Docker
0. Systemanforderungen CPU I5-10400F oder höher S...
Lösung, wenn Docker plötzlich vom externen Netzwerk nicht mehr erreichbar ist
Nach den Methoden der Meister wurde die Ursache g...
14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %
Vorwort Sass ist eine Erweiterung der CSS3-Sprach...
So ändern Sie das Datenbankdatenspeicherverzeichnis in MySQL
Vorwort Die Standarddatenbankdatei der MySQL-Date...
Erweiterte Erklärung der Javascript-Funktionen
Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...
Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten
SVG (Scalable Vector Graphics) ist ein Bildformat...
Softwaretests – MySQL (VI: Datenbankfunktionen)
1.MySQL-Funktionen 1. Mathematische Funktionen PI...
CSS zum Erzielen von Text auf dem Hintergrundbild
Wirkung: <div Klasse="imgs"> <...
Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen
Nichtorthogonale Ränder Wenn ein Rand verwendet w...
Allgemeine Verwendung von regulären Ausdrücken in MySQL
Allgemeine Verwendung von Regexp in Mysql Fuzzy-M...
Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18
MySQL wird in eine Installationsversion und eine ...
JS-Objektkonstruktor Object.freeze
Inhaltsverzeichnis Überblick Beispiel 1) Objekt e...
Detaillierte Konfiguration des mysql8.x-Docker-Remotezugriffs
Inhaltsverzeichnis Umweltbedingungen Aufgetretene...
Warum sind die Bilder in mobilen Web-Apps nicht klar und sehr verschwommen?
Warum? Am einfachsten lässt es sich so ausdrücken:...