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
Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click
Inhaltsverzeichnis Warum wird addEventListener be...
Funktionen in TypeScript
Inhaltsverzeichnis 1. Funktionsdefinition 1.1 Fun...
Eine kurze Diskussion darüber, ob CSS das Rendern von Seiten blockiert
Vielleicht weiß jeder, dass die JS-Ausführung die...
Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann
Problembeschreibung MySQL meldet beim Start einen...
2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML
So fügen Sie ein <script>-Skript in HTML ein...
Detaillierte Erläuterung des Docker-Datenmanagements (Datenvolumes und Datenvolume-Container)
Beim Einsatz von Docker in einer Produktionsumgeb...
MySQL-Wissenspunkte und häufig verwendete MySQL-Befehle für die Computerprüfung der zweiten Ebene
Die Grundlagen der MySQL-Wissenspunkte für die Co...
Detaillierte Erklärung der Datentypen und Schemaoptimierung in MySQL
Ich lerne derzeit etwas über MySQL-Optimierung. D...
Gängige Methoden zur Optimierung der Docker-Imagegröße
Die Docker-Images, die wir normalerweise erstelle...
Beispielcode zur Implementierung einer Schaltfläche mit Hintergrundverlauf mithilfe von Div+CSS3
Da die Nachfrage nach Front-End-Seiten weiter ste...
So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx
Inhaltsverzeichnis 1. Konsul-Cluster bereitstelle...
Implementierung von Docker-Datenvolumenoperationen
Erste Schritte mit Datenvolumes Wenn wir im vorhe...
Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt
1. Prinzip des besten linken Präfixes – Wenn mehr...
Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT
In den vorherigen Artikeln wurden die Ersetzungsf...
So führen Sie SCSS in ein React-Projekt ein
Laden Sie zuerst die Abhängigkeiten herunter Garn...