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:
|
<<: Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?
>>: Detaillierte Erklärung des Overlay-Netzwerks in Docker
Artikel empfehlen
MySQL 5.6.37 (zip) Download Installationskonfiguration Grafik-Tutorial
In diesem Artikel finden Sie das Download-, Insta...
Detaillierte Anwendung des dynamischen Vue-Formulars
Überblick Es gibt viele Formularanforderungen im ...
Unterschied und Prinzipanalyse des Nginx-Forward- und Reverse-Proxy
1. Der Unterschied zwischen Forward-Proxy und Rev...
Warum wird die MySQL-Paging-Funktion bei Verwendung von Limits immer langsamer?
Inhaltsverzeichnis 1. Testexperiment 2. Leistungs...
Vier Möglichkeiten zum Vergleichen von JavaScript-Objekten
Inhaltsverzeichnis Vorwort Referenzvergleich Manu...
Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)
Heute möchte ein Kunde eine Anzeige schalten und d...
Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Berechtigungen, Erstellen, Löschen, Kopieren, Verschieben, Suchen usw.]
Dieser Artikel beschreibt die Linux-Dateiverwaltu...
Mysql-Indextypen und grundlegende Anwendungsbeispiele
Inhaltsverzeichnis Index - Allgemeiner Index - Ei...
Beispiele für die Verwendung von pessimistischem und optimistischem Sperren in MySQL
Pessimistische Sperre Pessimistische Sperre, betr...
Bringen Sie Ihnen den detaillierten Prozess der Installation von DOClever mit Docker Compose bei
Inhaltsverzeichnis 1. Was ist Docker Compose und ...
Implementierungsideen für die Synchronisierung von Docker-Registry-Images
Einleitung Bisher wurden unsere Docker-Images in ...
JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten
Inhaltsverzeichnis Definition Grammatik Beispiele...
Einführung in Docker-Container
Docker-Übersicht Docker ist eine Open-Source-Lösu...
Was ist die Datei mysql-bin.000001 in MySQL? Kann sie gelöscht werden?
Nachdem ich MySQL über Ports installiert hatte, s...
Lösung für den MySQL-Root-Passwortfehler Nummer 1045
MySQL-Dienst stoppen Klicken Sie in Windows mit d...