Heim >Web-Frontend >H5-Tutorial >Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel

零下一度
零下一度Original
2017-07-25 09:37:413353Durchsuche

Heute, kombiniert mit dem Lotteriespiel im vorherigen Artikel,
verwenden Sie Leinwand, um ein kleines Spiel zu schreiben – Rubbeln.
Erstellen Sie zunächst mit Canvas eine Leinwand mit einer Breite und Höhe von 200 Pixeln. Positionieren Sie dann ein Span-Tag auf der Leinwand.

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Die Wirkung ist wie folgt

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Als nächstes holen Sie sich das Canvas-Tag, definieren ein Array und zeichnen dann mit Canvas ein graues Quadrat, um diesen Teil abzudecken.

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Die Wirkung ist wie folgt

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Erstellen Sie einen transparenten Kreis mit der Leinwand. Wenn Sie die Maus bewegen, löschen Sie die graue Ebene auf der Leinwand und zeigen Sie den Text unten an (erster Preis).

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel


Die Wirkung ist wie folgt

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Zuletzt mischen wir das gerade definierte Array nach dem Zufallsprinzip und löschen dann die graue Ebene, um verschiedene Preise anzuzeigen.

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel



Die Wirkung ist wie folgt

Ein Beispiel-Tutorial zum Thema Leinwand-Rubbel


Ich hoffe das hilft, danke!

Das obige ist der detaillierte Inhalt vonEin Beispiel-Tutorial zum Thema Leinwand-Rubbel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Analyse der HTML5-LernrouteNächster Artikel:Analyse der HTML5-Lernroute