HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)

Ich glaube, jeder hat schon einmal Rubbellose gespielt. Als Kind rief ich, sobald ich Geld in der Tasche hatte, meine Freunde an und rannte zum Laden in der Nähe meines Hauses. Ich gab dem Besitzer mit meinen zarten kleinen Händen die zerknüllten 50 Cent und rubbelte voller Vorfreude die Lose frei. Ich hatte mir bereits gedacht, dass ich, wenn ich 100 Yuan gewinnen würde, jede Menge scharfe Snacks, Karten, Kreisel und Audi Double Diamond-Jo-Jos kaufen würde …

Wenn Sie diesen Artikel aufmerksam lesen, können Sie die schönen Fotos Ihrer Freundin verwenden, um ein Rubbellos zu erhalten, das einzigartig für Sie ist! (Wenn Sie keine Freundin haben, können Sie natürlich auch die Bilder schöner Frauen verwenden, die Sie über viele Jahre gesammelt haben!)

⛳️Verwenden Sie HTML, CSS und JavaScript, um Rubbellose/Rubbellotterie zu implementieren

Keine Sorge, schauen Sie sich zuerst die Demo an

Implementieren von Rubbellosen mit HTML, CSS und JavaScript

Schritt 1: Erstellen Sie die Grundstruktur der Rubbelkarte

Schritt 2: Bild auf die Leinwand legen (als unterste Schicht der Rubbelkarte!)

Schritt 3: So erstellen Sie die Rubbellos-Hülle

Schritt 4: So entsteht der Schriftzug „Bitte freirubbeln“ auf der Rubbelfolie

Schritt 5: Verwenden Sie JavaScript, um die Rubbelkarte zu aktivieren

Fertig – jetzt können Sie Ihr eigenes Rubbellos verwenden!

Tutorial für Anfänger:

♥️Keine Sorge, schau dir zuerst die Demo an

Rubbellos

🎯🎯Wie ihr im Video oben sehen könnt, habe ich hier mit Hilfe von HTML, CSS und JavaScript ein Rubbellos umgesetzt. 🎯🎯
👑👑Wie wir alle wissen, sind Rubbellose in zwei Schichten unterteilt. Die obere Schicht ist eine Abdeckfolie, die direkt abgekratzt werden kann. Nachdem Sie die Abdeckfolie abgekratzt haben, erscheint die wahre Vorderseite des Rubbelloses und Sie wissen wirklich, ob Sie den Jackpot gewonnen haben! 👑👑

💎Verwenden Sie HTML, CSS und JavaScript, um Rubbellose zu implementieren

Ich hoffe, Ihnen gefällt dieses Design. Unten habe ich ein ausführliches Tutorial zur Erstellung dieses Designs bereitgestellt. Es enthält den vollständigen Code für das gesamte Design.
Sie können es einfach kopieren und einfügen. Es ist jedoch besser, jemandem das Angeln beizubringen, als ihm Fische zu schenken. Daher hoffe ich, dass Sie meinem Tempo folgen und jeden Schritt des gesamten Designs nach und nach lernen können. Ich glaube, dass Sie am Ende selbstständig Ihr eigenes Rubbellos entwerfen können!

Dazu müssen Sie zunächst eine HTML-Datei erstellen.

🎉Schritt 1: Erstellen Sie die Grundstruktur der Rubbelkarte

Beim Design dieser Rubbelkarte hat dieser Blogger im Front-End eine sehr beliebte Technologie verwendet – Canvas! Da wir Canvas verwenden, müssen wir es kurz vorstellen – Canvas verwendet JavaScript, um Bilder auf der Webseite zu zeichnen. Der Zeichenbereich ist rechteckig und wir können jedes Pixel darin steuern, um den gewünschten Zeicheneffekt zu erzielen. Das ist auch der Grund, warum dieser Blogger es verwendet! Wenn Sie Canvas gründlich lernen möchten, können Sie diesen Artikel lesen: „Damit meine jüngere Schwester Canvas in 20 Minuten lernen kann, bin ich lange aufgeblieben und habe hart an diesem Artikel und einem kleinen Projekt gearbeitet [❤️ Empfohlene Sammlung ❤️]“

Dieser HTML-Code zeichnet die Grundstruktur der Rubbelkarte durch Canvas. Ich habe etwas CSS-Code verwendet, um diesen Canvas-Bereich sichtbar zu machen (dieser Bereich ist auch der Bereich, in dem später die Rubbellose erstellt werden).
Dabei ist zu beachten, dass die Breite- und Höhe-Attribute dieser Leinwand (also Breite und Höhe) entsprechend der Größe Deines Bildes eingestellt werden sollten, da es sonst später zum Problem kommt, dass nur ein Teil des Bildes angezeigt wird!

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="UTF-8">
		<title>Rubbellotterie</title>
		<style type="text/css">
			#c1{
				Rand: 1px durchgehend blau;
			}
		</Stil>
	</Kopf>
	<Text>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
</html>

Demonstrationseffekt:

Bildbeschreibung hier einfügen

🎅Schritt 2: Legen Sie das Bild auf die Leinwand (als Grundlage der Rubbelkarte!)

Da Canvas JavaScript zum Zeichnen von Bildern auf der Webseite verwendet, werden alle Vorgänge im Rubbelkartenbereich (also im Canvas-Bereich) in JavaScript ausgeführt (obwohl JavaScript im Front-End als das schwierigste gilt, habe ich im Code unten ausführliche Kommentare zu allem JavaScript gegeben. Wenn Sie die Grundlagen von JavaScript beherrschen, werden Sie es meiner Meinung nach auf jeden Fall verstehen!).
Hinweis: Derzeit werden Bilder in HTML verwendet. Sie müssen daher im selben Verzeichnis wie diese HTML-Datei einen img-Ordner erstellen und Ihre Bilder dort ablegen!

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="UTF-8">
		<title>Rubbellotterie</title>
		<style type="text/css">
			#c1{
				Rand: 1px durchgehend blau;
			}
		</Stil>
	</Kopf>
	<Text>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
	<Skripttyp="text/javascript">
		// Schritt 1: Canvas-Objekt zuordnen var c1 = document.getElementById("c1");
		//Schritt 2: Holen Sie sich den Kontext der Leinwand var ctx1 = c1.getContext("2d"); //Das Objekt getContext("2d") ist ein integriertes HTML5-Objekt mit mehreren Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und Hinzufügen von Bildern.
		
		//Ein Bildobjekt erstellen var imgs = new Image();
		//Geben Sie den Bildpfad an imgs.src = 'img/girl.jpg'
		
		// Hinweis: Bilder können nicht direkt auf der Leinwand platziert werden. Sie müssen über das Ereignis .onload geladen werden. Andernfalls wird das Bild möglicherweise nicht auf der Leinwand angezeigt, da es nicht vollständig geladen wurde. imgs.onload = function(){
			// Parameter: Bild, Start-X-Koordinate, Start-Y-Koordinate, die letzten beiden Parameter geben die Größe an (es wird empfohlen, dass das Größenverhältnis dem ursprünglichen Bildverhältnis entspricht)
			// Werden die letzten beiden Parameter nicht angegeben, wird das Originalbild standardmäßig 1:1 gezeichnet, und der nicht darstellbare Inhalt wird nicht mehr angezeigt!
			ctx1.drawImage(dieses,0,0,960,1440)
			
			// Erweiterte Nutzung:
			//jb.drawImage(dieses,200,200,300,300,0,0,1078,1881)
			// 200,200,300,300 bestimmt den Zuschnitt des Bildbereichs von oben links nach unten rechts. Die folgenden vier Koordinaten stellen die oberen linken und unteren rechten Koordinaten des gezeichneten Bereichs dar. }
			
	</Skript>
</html>

Demonstrationseffekt:

Bildbeschreibung hier einfügen

🎃Schritt 3: So erstellen Sie die Rubbellos-Abdeckfolie

Was die Deckfolie des Rubbelloses betrifft, erreicht dieser Blogger dies, indem er eine weitere Leinwand erstellt und sie direkt auf die Leinwandebene mit dem gekachelten Bild legt – das entspricht doch auch den Merkmalen von Rubbellosen, nicht wahr?

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="UTF-8">
		<title>Rubbellotterie</title>
		<style type="text/css">
			#c1{
				Rand: 1px durchgehend blau;
				Position: absolut;
			}
			
			#c2{
				Rand: 1px durchgehend rot;
			}
			
			Körper{
				Position: relativ;
			}
		</Stil>
	</Kopf>
	<Text>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<Skripttyp="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// Zeichne das Bild auf die darunterliegende Leinwand2
		var imgs = neues Bild();
		imgs.src = "img/mädchen.jpg";
		imgs.onload = Funktion(){
			ctx2.drawImage(dieses,0,0)
		}
		
		// Zeichnen Sie die Beschichtung auf die oberste Schicht (also den Deckfilm) canvas1
		ctx1.fillStyle = "hellgrau";
		ctx1.fillRect(0,0,960,1440);

	</Skript>
</html>

Demonstrationseffekt:

Bildbeschreibung hier einfügen

Es ist zu beachten, dass der obige Code die absolute Positionierung der Leinwand des darunterliegenden Bildes der gekachelten Rubbelkarte festlegt und die relative Positionierung des übergeordneten Body-Tags festlegt (im Frontend wird oft gesagt, dass das übergeordnete Element relativ zum untergeordneten Element ist!).

Lassen Sie mich kurz auf die relative und absolute Positionierung eingehen (Sie können es verstehen):

position:relativ – relative Positionierung; position:absolut – absolute Positionierung;
Im Allgemeinen wird das Relative im übergeordneten Div und das Absolute im untergeordneten Div platziert.
Absolute Positionierung ist eine schwebende Ebene. Wenn Sie die relative Position des übergeordneten Divs oben löschen, bewegt sich die absolute Position des untergeordneten Divs wie eine Schlange!
Wenn Sie also die absolute Positionierung verwenden, muss im übergeordneten Div eine relative Positionierung vorhanden sein, um zu verhindern, dass sich die Ebene der absoluten Positionierung verschiebt! ! !

🎈Schritt 4: So entsteht der Schriftzug „Bitte freirubbeln“ auf der Rubbelfolie

Fügen Sie einfach den folgenden JavaScript-Code hinzu!

	//Parameter: normale Schriftart/kursiv Schriftgröße Microsoft YaHei/FangSong normal: normale Schriftart/kursiv: kursiv ctx1.font = "normal 80px FangSong";   
	//Schriftumrissfarbe ctx1.strokeStyle = "slateblue";	
	//Text zeichnen (hohl) Parameter: Text, X-Koordinate der oberen linken Ecke, Y-Koordinate der oberen linken Ecke ctx1.strokeText("Bitte freikratzen!",320,750);

Demonstrationseffekt:

Bildbeschreibung hier einfügen

👻Schritt 5: Verwenden Sie JavaScript, um das Rubbellos zu aktivieren

Wir haben das gesamte Rubbellos oben entworfen, dieses Rubbellos verfügt jedoch noch über keine Betriebsfunktionen. Das heißt, dieses Rubbellos ist nicht freirubbelbar! Wenn man es nicht einmal freirubbeln kann, warum nennt man es dann Rubbellos? ! ! . Dazu müssen wir JavaScript verwenden, um auf Mausereignisse zu warten und so die Rubbelkarte zu aktivieren.
Verwenden Sie das folgende JavaScript. Ich habe den Code ausführlich kommentiert. Wenn Sie die Grundlagen von JavaScript beherrschen, werden Sie es bestimmt verstehen.

Übrigens: Dieses Rubbellos ist so konzipiert, dass nach jedem Mausklick die Abdeckfolie des 50 x 50 Pixel großen Bereichs, auf dem sich Ihre Maus bewegt, kontinuierlich gelöscht wird. Wird nicht mehr gelöscht, wenn die Maustaste losgelassen wird! Hören Sie also zuerst auf das Mausklickereignis der Leinwand, und wenn das Mausklickereignis erfasst wird, hören Sie dann auf das Mausbewegungsereignis. Das Mausbewegungsereignis enthält eine Löschfunktion! Beim Loslassen der Maus wird die Löschfunktion deaktiviert!

// Auf das Onmousedown-Ereignis der Zeichenfläche achten (also das Mausklick-Ereignis)
		c1.onmousedown = Funktion(ev){
		c1.onmousemove = function(e){ //Auf das onmousemove-Ereignis der Zeichenfläche hören (also das Ereignis der Mausbewegung)
			konsole.log(e);
			var w = 50; // Breite des freien Bereichs var h = 50; // Höhe des freien Bereichs var x = e.pageX-c1.offsetLeft - w/2; // x-Position des freien Bereichs var y = e.pageY-c1.offsetTop - h/2; // y-Position des freien Bereichs ctx1.clearRect(x,y,w,h);
		}
		}
		// Auf das Onmouseup-Ereignis der Maus achten (also das Loslassen der Maus)
		c1.onmouseup = Funktion(ev){
		//Onmousemove-Ereignis abbrechen c1.onmousemove = null;
		}

💝Fertig – Jetzt können Sie die von Ihnen gestaltete Rubbelkarte verwenden! 🏄Tutorial für absolute Anfänger:

Umgebungsvorbereitung: Es ist keine Umgebung erforderlich! Bei diesem Design handelt es sich um eine reine Front-End-Implementierung, es ist also überhaupt keine Umgebung erforderlich. Sie benötigen lediglich einen Browser auf Ihrem Computer (ich glaube nicht, dass Sie nicht einmal einen integrierten Browser auf Ihrem Computer haben)!
Erstellen Sie einen Projektordner, ich habe ihn „Scratch-off“ genannt.
Erstellen Sie unter dem Projektordner einen Ordner „img“ und legen Sie dort die schönen Bilder Ihrer Freundin/von lange gesammelten Bilder ab.
Erstellen Sie im Projektordner eine Textdatei mit dem Namen „Scratch.txt“ und kopieren Sie den folgenden Code hinein.
Benennen Sie die Datei „Scratch-off.txt“ in „Scratch-off.html“ um.
Zum Ausführen doppelklicken! ! !

Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="UTF-8">
		<title>Rubbellotterie</title>
		<style type="text/css">
			#c1{
				Rand: 1px durchgehend blau;
				Position: absolut;
			}
			
			#c2{
				Rand: 1px durchgehend rot;
			}
			
			Körper{
				Position: relativ;
			}
		</Stil>
	</Kopf>
	<Text>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<Skripttyp="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// Zeichne das Bild auf die darunterliegende Leinwand2
		var imgs = neues Bild();
		imgs.src = "img/mädchen.jpg";
		imgs.onload = Funktion(){
			ctx2.drawImage(dieses,0,0)
		}
		
		// Zeichnen Sie die Beschichtung auf die oberste Schicht (also den Deckfilm) canvas1
		ctx1.fillStyle = "hellgrau";
		ctx1.fillRect(0,0,960,1440);
		
		ctx1.font = "normal 80px Fangsong";   
		ctx1.strokeStyle = "schieferblau";			
		ctx1.strokeText("Bitte streichen Sie es!",320,750);
		
		// Auf das onmousedown-Ereignis des Canvas warten c1.onmousedown = function(ev){
		c1.onmousemove = Funktion(e){
			konsole.log(e);
			var w = 50; // Breite des freien Bereichs var h = 50; // Höhe des freien Bereichs var x = e.pageX-c1.offsetLeft - w/2; // x-Position des freien Bereichs var y = e.pageY-c1.offsetTop - h/2; // y-Position des freien Bereichs ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = Funktion(ev){
		//Onmousemove-Ereignis abbrechen c1.onmousemove = null;
		}

	</Skript>
</html>

Wenn Sie aus diesem Artikel etwas gelernt und es Ihnen gefallen hat, fühle ich mich geehrt. Ich hoffe, Sie können diesen Artikel mit Ihren Freunden teilen, ihn liken und als Lesezeichen speichern. Die Leser sind herzlich eingeladen, im Kommentarbereich über die Technologie zu diskutieren oder ihre ehrliche Meinung kundzutun.

Dieser Artikel endet hier. Nett, Sie kennenzulernen – ich bin [孤寒者], ein Junge, der Computer mag! 🌹

Dies ist das Ende dieses Artikels über HTML+CSS+JavaScript zum Erstellen einer Freundinnenversion des Rubbellos (Sie können es auf einen Blick lernen). Weitere verwandte HTML+CSS+JavaScript-Rubbellosinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

HTML plus CSS-Stil zum Erreichen des Beispielcodes für die Homepage eines JS-Food-Projekts
Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript
JS, CSS und HTML zur Implementierung der Registrierungsseite
SpringMVC @RequestBody Datumstyp Json-Konvertierungsmethode
C# sendet eine POST-Anfrage mit JSON-Body über HttpWebRequest
Lösen Sie das Problem, dass @RequestBody ein JSON-Objekt empfängt und Fehler 415 meldet.
Lassen Sie uns über die Beziehung zwischen @RequestBody und Json sprechen
Ändern Sie den Stil des HTML-Textkörpers in JS

<<: PostgreSQL-Materialisierte Ansichtsprozessanalyse

>>: Lösen Sie das Problem, dass der MySql-Client in Sekunden beendet wird (my.ini nicht gefunden).

Lösung für 1067, wenn Mysql in Windows startet

Das umfassendste Tutorial zur Installation von Centos8.1 mit VMware15.5 und dem Problem des unzureichenden physischen Speichers

1. Vorbereitung der virtuellen Maschine 1. Erstel...

HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)

⛳️Verwenden Sie HTML, CSS und JavaScript, um Rubbellose/Rubbellotterie zu implementieren

♥️Keine Sorge, schau dir zuerst die Demo an

💎Verwenden Sie HTML, CSS und JavaScript, um Rubbellose zu implementieren

🎉Schritt 1: Erstellen Sie die Grundstruktur der Rubbelkarte

🎅Schritt 2: Legen Sie das Bild auf die Leinwand (als Grundlage der Rubbelkarte!)

🎃Schritt 3: So erstellen Sie die Rubbellos-Abdeckfolie

🎈Schritt 4: So entsteht der Schriftzug „Bitte freirubbeln“ auf der Rubbelfolie

👻Schritt 5: Verwenden Sie JavaScript, um das Rubbellos zu aktivieren

💝Fertig – Jetzt können Sie die von Ihnen gestaltete Rubbelkarte verwenden! 🏄Tutorial für absolute Anfänger:

Lösung für 1067, wenn Mysql in Windows startet

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework

Tipps zum Escapen von HTML-Texten

So beheben Sie den Fehler „MySQL-Dienst kann nicht gestartet werden, Fehler 1069“

Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

4 Lösungen für MySQL-Import-CSV-Fehler

Einführung in HTML für Frontend-Entwickler

Detailliertes Verständnis des Lebenszyklusvergleichs zwischen Vue2 und Vue3

MySQL-Abfrage – Erlernen grundlegender Abfrageoperationen

Artikel empfehlen

MySQL5.7 Master-Slave-Konfigurationsbeispielanalyse

Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

Beispiel für die Implementierung einer farbigen Fortschrittsbalkenanimation mit CSS3

Analyse der Prinzipien von MySQL Dirty Page Flush und Shrinking Table Space

Eine kurze Analyse der CSS-Selektorgruppierung

Zusammenfassung des Tutorials zur Installation und Bereitstellung von KVM für die VMware-Virtualisierung

Das umfassendste Tutorial zur Installation von Centos8.1 mit VMware15.5 und dem Problem des unzureichenden physischen Speichers

Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden

Detaillierte Erläuterung der Lösung zur Echtzeitsynchronisierung von MySQL nach Oracle

So generieren Sie PDFs und laden sie im Vue-Frontend herunter

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Implementierung eines Element-Eingabefelds, das automatisch den Fokus erhält

Zusammenfassung der Verwendung von TypeScript in React-Projekten

Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL

Vue implementiert unregelmäßige Screenshots