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
Tutorial zur Installation von MySQL8 unter Linux CentOS7
1. Installation der RPM-Version Überprüfen Sie, o...
So berechnen Sie die Bildrate FPS von Webanimationen
Inhaltsverzeichnis Standards für flüssige Animati...
Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks
Professionelles Webdesign ist komplex und zeitint...
CSS3-Mauszeiger-Übergangszoomeffekt
Das Folgende ist ein Bild-Zoom-Effekt, der in rei...
Das Installationstutorial zu mysql5.5.28 ist super detailliert!
mysql5.5.28 Installations-Tutorial zu Ihrer Infor...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete von MySQL 5.7.17
Da es im Internet nur wenige und unzureichende In...
Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt
CSS 3-Animationsbeispiel - Dynamischer Effekt des...
Über MySQL innodb_autoinc_lock_mode
Der Parameter innodb_autoinc_lock_mode steuert da...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)
1. Inline-Referenz: Wird direkt auf dem Etikett v...
Anwendung von HTML und CSS in Flash
Anwendung von HTML und CSS in Flash: Ich habe zufä...
Detaillierte Erläuterung der Implementierungsmethode für kumulative Berechnungen von MySQL
Inhaltsverzeichnis Vorwort Bedarfsanalyse Mysql-B...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen
Ich habe viele davon gesammelt, aber alle endeten...
Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme
Hintergrund Das Lösen von Browserkompatibilitätsp...