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:
|
<<: Detailliertes Tutorial zum Festlegen des Passworts für die kostenlose MySQL-Installationsversion
>>: mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)
Artikel empfehlen
Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS
Um den Benutzern beim Layouten der Seite einen an...
CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen
In diesem Beitrag verwenden wir die Pseudoklasse ...
Vue implementiert eine einfache bidirektionale Datenbindung
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung von Objektliteralen in JS
Inhaltsverzeichnis Vorwort 1. Setzen Sie den Prot...
Detaillierte Erklärung der HTML-Formularelemente (Teil 1)
HTML-Formulare werden verwendet, um verschiedene ...
Ein praktisches Tutorial zum Erstellen einer vollständig verteilten Hadoop-Umgebung unter Ubuntu 16.4
Vorwort In diesem Artikel werden hauptsächlich di...
Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern
So erhalten Sie den Container-Startbefehl Der Con...
Einige Hinweise zur MySQL-Self-Join-Deduplizierung
Lassen Sie mich kurz das Funktionsszenario erklär...
So verweisen Sie auf jQuery in einer Webseite
Die Referenzierung ist über CDN (Content Delivery ...
Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes
Inhaltsverzeichnis LAMP-Architektur 1.Lampeneinfü...
Erläuterung des TypeScript-Namespace
Inhaltsverzeichnis 1. Definition und Verwendung 1...
Informationen zum Bereitstellen eines Webprojekts auf dem Alibaba Cloud Server (in 5 Schritten)
1. Melden Sie sich zunächst auf der Alibaba Cloud...
Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen
VMWare (Virtual Machine Ware) ist ein Softwareunt...
So entfernen Sie in Linux ganz einfach installierte Quellpakete
Schritt 1: Stow installieren In diesem Beispiel v...
Verwenden von HTML+CSS zum Verfolgen von Mausbewegungen
Da Benutzer immer datenschutzbewusster werden und...