Canvas zeichnet Rubbellos-Effekt

In diesem Artikel wird der spezifische Code zum Zeichnen des Rubbelkarteneffekts mit Canvas als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Erstes Bild

Code

<!DOCTYPE html>
<html>
<Kopf>
 <meta name="keywords" content="Feng Wu Hong Feng, Front-End-Technologie, Canvas"/>
 <meta name="description" content="Fengwu Hongfeng, Front-End-Technologie, Canvas, Vue, React, Node, persönlicher Blog"/>
 <meta charset="utf-8">
 <title>Rubbelkarte</title>
 <link rel="icon" href="../bild/icon2.ico" >
 <style type="text/css">
 *{Rand:0;Padding:0;}
 html,body{height:100%;}
 Körper {Überlauf: versteckt;}
 div{Position:absolut;links:0;rechts:0;oben:0;unten:0;Rand:auto;Breite:300px;Höhe:150px;Textausrichtung:Mitte;Zeilenhöhe:150px;Hintergrund:rgb(200,0,0);Farbe:rgb(255,255,255);Schriftgröße:22px;}
 Leinwand {Anzeige: Block; Position: absolut; links: 0; rechts: 0; oben: 0; unten: 0; Rand: automatisch; Filter: Unschärfe (0,7 Pixel);}
 </Stil>
</Kopf>
<Text>
 <div></div>
 <Leinwand></Leinwand>
</body>
<Skripttyp="text/javascript">
 var div = document.getElementsByTagName('div')[0];
 var Leinwand = document.getElementsByTagName('Leinwand')[0];
 var Kontext = Canvas.getContext("2d");

 var Jackpots = ["Erster Preis","Zweiter Preis","Dritter Preis","Vierter Preis","Bonuspreis"];
 //Wahrscheinlichkeit für den ersten Preis 2 % Wahrscheinlichkeit für den zweiten Preis 6 % Wahrscheinlichkeit für den dritten Preis 14 % Wahrscheinlichkeit für den vierten Preis 30 % Wahrscheinlichkeit für den Bonuspreis 48 %
 var Jackpot = rand(0,49);
 wenn(Jackpot == 0){
 div.innerHTML = Jackpots[0];
 }sonst wenn(Jackpot>0 && Jackpot<4){
 div.innerHTML = Jackpots[1];
 }sonst wenn(Jackpot>3 && Jackpot<11){
 div.innerHTML = Jackpots[2];
 }sonst wenn(Jackpot>10 && Jackpot<26){
 div.innerHTML = Jackpots[3];
 }anders{
 div.innerHTML = Jackpots[4];
 }

 Kontext.beginPath();
 Kontext.Füllstil = "rgb(200,200,200)"
 Kontext.moveTo(0,0);
 Kontext.lineTo(300,0);
 Kontext.lineTo(300,150);
 Kontext.lineTo(0,150);
 Kontext.lineTo(0,0);
 Kontext.Füllen();
 Kontext.Pfad schließen();

 Kontext.beginPath();
 Kontext.Schriftart = "30px Arial";
 Kontext.Füllstil = "rgb(255,255,255)"
 context.fillText("Rubbelkarte", 110, 90);
 Kontext.Füllen();
 Kontext.Pfad schließen();
 
 var Füllfarbe = ["rgb(255,0,0,0,8)","rgb(255,255,0,0,8)","rgb(255,0,255,0,8)","rgb(0,255,255,0,8)"];
 für(var i = 0;i<50;i++){
 Kontext.beginPath();
 Kontext.Füllstil = Füllfarbe[rand(0,3)];
 Kontext.Bogen(Rand(20,280),Rand(20,130),1,0,2*Math.PI);
 Kontext.Füllen();
 Kontext.Pfad schließen();
 }

 var flag = falsch;
 canvas.onmousedown = Funktion(){
 Flagge = wahr;
 }

 canvas.onmouseup = Funktion(){
 Flagge = falsch;
 }

 canvas.onmousemove = Funktion(){
 wenn(Flagge){
 var e = Ereignis || Fenster.Ereignis;
 var x = e.clientX - parseInt(div.offsetLeft);
 var y = e.clientY - parseInt(div.offsetTop);
 //Konsole.log(x,y);

 Kontext.beginPath();
 Kontext.Bogen(x,y,20,0,2*Math.PI);
 context.globalCompositeOperation="Ziel-Ausgang";
 Kontext.Füllen();
 Kontext.Pfad schließen();
 }
 }

 //Eine zufällige Ganzzahl von n bis m Funktion rand(n,m){
 var c = m – n + 1;
 gibt Math.floor(Math.random() * c + n) zurück;
 }
</Skript>
</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:

Leinwand erzielt Rubbellos-Effekt
Verwenden von HTML5 Canvas zum Erzielen eines Rubbelloseffekts
JavaScript+Canvas zum Erzielen eines Rubbellos-Lotterieeffekts
jQuery verwendet das Plugin eraser.js, um den Effekt des Löschens und Rubbelns von Karten zu erzielen [mit Download von eraser.js]
Mobile JS- und HTML5-Rubbelloseffekte
js und html5 realisieren den mobilen Rubbellos-Lotterieeffekt, perfekte Kompatibilität mit Android/IOS

<<: Detailliertes Tutorial zum Festlegen des Passworts für die kostenlose MySQL-Installationsversion

>>: mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)