JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts

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.
(2) Zweitens ist es notwendig, im Seitenlayout eine Uhrgrafik zu rendern, die Position der Skala und den statischen Effekt der Position des Stundenzeigers, des Minutenzeigers und des Sekundenzeigers zu zeichnen, damit der Timer später dynamische Effekte erzielen kann.
(3) Nach Abschluss dieser Aufgaben besteht der schwierigste Teil darin, den Stundenzeiger, den Minutenzeiger und den Sekundenzeiger nacheinander der Skala anzupassen. Dann müssen wir das Bogensystem eines Kreises verwenden und den Timer jede Sekunde die Uhrfunktion aufrufen lassen.
(4) Um diese Effekte zu erzielen, speichern und löschen Sie die Leinwand rechtzeitig, um Fehler zu vermeiden. (5) Verwenden Sie JavaScript zum Rendern auf der Seite, um die Funktion zu erreichen.

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:

  • Verwenden Sie die For-Schleife, um 12 Schleifen auszuführen, da es 12 Stundenzeigerskalen gibt, was zum Zeichnen der folgenden Skalen praktisch ist.
  • Legen Sie den Mittelpunkt der Leinwand als Ursprung des Kreises fest und drehen Sie die Leinwand.
  • Ein perfekter Kreis hat einen Umfang von 360 Grad und ist in 12 gleiche Teile unterteilt. Jeder Teil muss 30 Bögen drehen. Die Leinwand dreht sich jedes Mal 30 Bögen und das 12 Mal.
  • Zeichnen Sie die Skala und geben Sie ihr einen zufälligen Farbstil.

Stundenzeigerzeichnung (Stundenzeiger und Minutenzeiger sind grundsätzlich gleich):

  • Zuerst müssen Sie den Leinwandstatus speichern und die Linienstärke und -farbe festlegen.
  • Setzen Sie den Ursprung der Leinwand auf die Mitte der Leinwand zurück.
  • Der Stundenzeiger muss sich entsprechend der Drehung des Sekundenzeigers und des Minutenzeigers jedes Mal um 30 Bögen drehen.
  • Zeichnen Sie das Stundenzeigersegment und stellen Sie es auf der Stundenzeigerseite dar.

Zeichnen Sie die Mitte des Zifferblatts:

  • Finden Sie den Mittelpunkt des Leinwandkreises.
  • Zeichnen Sie einen festen Ursprung mit einem Radius von 4 in der Mitte des Kreises als Schnittpunkt (Mittelpunkt) der drei Zeiger für Stunden, Minuten und Sekunden.

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:
  • JavaScript Canvas realisiert farbenfrohen Sonnenhalo-Effekt

<<:  Installations-Tutorial für die ZIP-Archivversion von MySQL 5.7

>>:  So zeigen Sie die IP-Adresse des Docker-Containers an

Artikel empfehlen

Detaillierte Erläuterung des geplanten Ausführungsbefehls von Crontab unter Linux

Unter LINUX werden periodische Aufgaben normalerw...

So importieren Sie Excel-Dateien in eine MySQL-Datenbank

In diesem Artikel erfahren Sie, wie Sie Excel-Dat...

So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an

Folgen Sie dem offiziellen Tutorial, laden Sie da...

JavaScript zur Implementierung der Funktion zum Ändern des Avatars

In diesem Artikel wird der spezifische JavaScript...

Top 10 Js Bildverarbeitungsbibliotheken

Inhaltsverzeichnis einführen 1. Pica 2. Lena.js 3...

Besprechen Sie den Wert von Webstandards aus vier Aspekten mit einer Mindmap

Ich habe einige Werte grob aufgelistet, um die Di...

Analysieren von AB-Leistungstestergebnissen unter Apache

Ich habe immer Loadrunner für Leistungstests verw...

Wenn catalina.bat in Tomcat auf UTF-8 eingestellt ist, werden auf der Konsole verstümmelte Zeichen angezeigt

1. catalina.bat muss auf UTF-8 eingestellt sein. ...

Wo werden MySQL-Daten gespeichert?

Speicherort der MySQL-Datenbank: 1. Wenn MySQL di...

Reparaturlösung für inkonsistenten MySQL GTID-Master und -Slave

Inhaltsverzeichnis Lösung 1: Replikate neu erstel...

Detaillierte Erklärung zur Verwendung des Linux-Befehls mpstat

1. mpstat-Befehl 1.1 Befehlsformat mpstat [ -A ] ...

Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports

Netzwerk-Ports freigeben Tatsächlich gibt es in D...

Über die Probleme von Kongruenz und Ungleichheit, Gleichheit und Ungleichheit in JS

Inhaltsverzeichnis Kongruent und inkongruent kong...

js, um die Rotation von Webseitenbildern zu realisieren

In diesem Artikel wird der spezifische Code von j...

In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

Ich möchte eine Frage stellen. Ich habe in Dreamw...