JS+Canvas zeichnet ein Glücksrad

In diesem Artikel wird der spezifische Code der JS+Canvas-Zeichnung des Lotterie-Drehtellers zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Ich möchte Ihnen eine Verlosung mit einem von Canvas gezeichneten Drehteller zeigen. Wenn Sie auf den Schalter klicken, um den Drehteller zu starten, beginnt sich der Drehteller zu drehen. Wenn der Drehteller anhält, ist der Bereich, auf den der Zeiger zeigt, der gezogene Preis und wird in der Mitte des Drehtellers angezeigt. Der Effekt ist wie folgt:

Der Animationscode lautet wie folgt:

<!DOCTYPE html>
<html>
 
<Kopf>
    <Stil>
        Leinwand {
            Hintergrund: #eee;
        }
    </Stil>
    <title>Canvas zeichnet das Glücksrad</title>
    <Skript>
        fenster.onload = Funktion () {
            var Leinwand = document.getElementById("Leinwand");
            var cobj = canvas.getContext("2d");
            var btn = document.getElementById("btn");
            var num = Math.PI / 180;
            cobj.translate(250, 250);
            var colorArr = ["#24a274", "#2a70a6", "#6d56c3", "#b23880", "#7a9a36", "#b48548", "#397839", "#89489c"];
            var textArr = ["js", "html", "css", "php", "mysql", "node", "flutter", "java"];
            var Winkel = 0;
            btn.onclick = Funktion () {
                Standort.neu laden();
            };
            var Schritt = 10 + 10 * Math.random();
            var t = setzeIntervall(Funktion () {
                wenn (Schritt <= 0,3) {
                    Intervall löschen(t);
                    var num1 = Math.ceil(Winkel / 45);
                    var con = textArr[textArr.Länge - Num1];
                    cobj.font = "18px serifenlos";
                    cobj.textAlign = "zentriert";
                    cobj.fillText(con, 0, 0);
                } anders {
                    wenn (Winkel >= 360) {
                        Winkel = 0;
                    }
                    Schritt *= 0,95;
                    Winkel += Schritt;
                    cobj.clearRect(-200, -200, 500, 500);
                    cobj.beginPath();
                    cobj.Linienbreite = 5;
                    cobj.moveTo(135, 0);
                    cobj.lineTo(150, 0);
                    cobj.stroke();
                    cobj.Linienbreite = 2;
                    cobj.speichern();
                    cobj.rotate(Winkel * Zahl);
 
                    für (var i = 1; i <= 8; i++) {
                        cobj.beginPath();
                        cobj.moveTo(0, 0);
                        cobj.fillStyle = colorArr[i - 1];
                        cobj.arc(0, 0, 130, (i - 1) * 45 * Zahl, i * 45 * Zahl);
                        cobj.closePath();
                        cobj.stroke();
                        cobj.fill();
                    }
 
 
                    cobj.beginPath();
                    cobj.fillStyle = "#fff";
                    cobj.arc(0, 0, 60, 0, 2 * Math.PI);
                    cobj.fill();
 
 
                    für (var i = 0; i < 8; i++) {
                        cobj.speichern();
                        cobj.beginPath();
                        cobj.rotate((i * 45 + 20) * num);
                        cobj.fillStyle = "#222";
                        cobj.font = "18px serifenlos";
                        cobj.fillText(textArr[i], 75, 0);
                        cobj.wiederherstellen();
                    }
                    cobj.wiederherstellen();
                }
            }, 60)
        }
    </Skript>
</Kopf>
 
<Text>
    <Leinwand id="Leinwand" Breite=500 Höhe=500></Leinwand>
    <input Typ="Schaltfläche" Wert="Start" id="btn" />
</body>
 
</html>

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:

js+canvas realisiert Plattenspielereffekt (zwei Versionen)
Analyse der Implementierungsmethode für JS-Lotterie-Drehscheiben
Zusammenfassung und Implementierungsideen der großen Plattenspielerlotterie von Vue.js
JS implementiert ein einfaches Beispiel für einen Lotterie-Drehscheibeneffekt
jquery.rotate.js implementiert den Lotteriecode des Drehtellers mit optionaler Lotterienummer und Gewinninhalt
Mit Javascript eine einfache Glücksrad-Lotterie implementieren
js HTML5 Canvas zieht eine Verlosung mit einem Drehteller
JavaScript+HTML5 Canvas zieht eine Verlosung mit einem Plattenteller durch
Realisierung der Wirkung des Jiugongge-Plattenspielers basierend auf Javascript
js, um ein Beispiel für ein großes Drehscheibenlotteriespiel zu erreichen

<<: Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?

>>: Detaillierte Erklärung des Overlay-Netzwerks in Docker

So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um

JS+Canvas zeichnet ein Glücksrad

So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um

Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

So fügen Sie Batchdaten unter Node.js in eine MySQL-Datenbank ein

Detaillierte Erläuterung der Wissenspunkte zu Linux Netfilter/Iptables

Detaillierte Erklärung zur Synchronisierung von Daten von MySQL mit Elasticsearch

Beispiel für eine geplante MySQL-Datenbanksicherung

Schritte zum Anpassen des Symbols in Vue

Was tun, wenn der von Docker Run gestartete Container hängt und Daten verliert?

Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?

Artikel empfehlen

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

So verwenden Sie uni-app, um Schaltflächen und Suchfelder in der oberen Navigationsleiste anzuzeigen

Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung

MySQL 5.7.19 neueste Binärinstallation

So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder

VUE implementiert eine Timeline-Wiedergabekomponente

JSONP-domänenübergreifende Simulation der Baidu-Suche

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

Grundlegende MySQL-Grundlagen: Gruppierungsfunktion, Aggregatfunktion, Gruppierungsabfrage – ausführliche Erklärung

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

Verwendung des Linux-Befehls xargs

Vue realisiert Preiskalendereffekt

Detaillierte Erklärung der wechselseitigen Verwendung von Ref in React

MySQL-Beispiel für die Konvertierung von Spalten in Zeilen und die Gruppierung nach Jahr und Monat