JavaScript generiert zufällige Grafiken durch Klicken

JavaScript generiert zufällige Grafiken durch Klicken

In diesem Artikel wird der spezifische Code von Javascript zur Generierung zufälliger Grafiken durch Klicken als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Klicken Sie hier, um zufällige Grafiken zu generieren

Die Wirkung ist wie folgt:

Implementiert mit JavaScript

Verwenden Sie hauptsächlich Canvas- und Zufallsfunktionen, um verschiedene Grafiken zu vervollständigen

erster Schritt

Erstellen Sie das Rechteck, in dem die Grafik angezeigt wird, und die beiden Schaltflächen in HTML und CSS. Mit der ersten Schaltfläche können Sie Grafiken erstellen und mit der zweiten Schaltfläche alle erstellten Grafiken löschen.

<Stil>
  *{
   Rand: 0;
   Polsterung: 0;
  }
  #Leinwand{
   Rand: durchgehend 1 Pixel rot;
   Anzeige: Block;
   Rand: 0 automatisch;
  }
  #Vater{
   Breite: 200px;
   Rand: 0 automatisch;
   
  }
  #btn{
   Rand rechts: 40px;
   Cursor: Zeiger;
  }
  #cle{
   Cursor: Zeiger;
  }
</Stil>
<Text>
 <Leinwand-ID="Leinwand" Breite="600" Höhe="600"></Leinwand>
 <div id="Vater">
  <input type="button" id="btn" value="Klicken zum Generieren">
  <input type="button" id="cle" value="Zum Löschen klicken">
 </div>
</body>

Schritt 2

Erstellen Sie in JavaScript Funktionen für zufällige Farben, Funktionen zum zufälligen Generieren von Grafiken beim Klicken und Funktionen zum Löschen des Bildschirms beim Klicken.

var Leinwand = document.getElementById("Leinwand");
 var Kontext = Canvas.getContext("2d");
 var btn = document.getElementById("btn");
 var cle = document.getElementById("cle");

Stellen Sie die zufällige Farbe der Form ein

Funktion Farbe(){
  var r = Math.floor(Math.random()*255);
  var g = Math.floor(Math.random()*255);
  var b = Math.floor(Math.random()*255);
  var a=Math.random();
  var bg="rgba("+r+","+g+","+b+","+a+")";
  Rückkehr bg;
 }

Richten Sie eine Funktion ein, um beim Klicken auf eine Schaltfläche zufällig Grafiken zu generieren. Der erste Typ sind ausgefüllte und ausgefüllte Rechtecke, der zweite Typ sind ausgefüllte und ausgefüllte Kreise und der dritte Typ ist eine gerade Linie. Schreiben Sie Zufallsfunktionen für ihre Positionen und Größen und fügen Sie dann Canvas-Codes hinzu, um Grafiken zu zeichnen, z. B. context.beginPath()-context closePath().

btn.onclick=Funktion(){
  var random = Math.floor(Math.random()*3+1);
  wenn(random==1){
   var rectr=Math.floor(Math.random()*2);
   var rectx = Math.floor(Math.random()*600);
   var recty=Math.floor(Math.random()*600);
   var Rechteckbreite = Math.floor (Math.random()*200+200);
   var rectheight=Math.floor(Math.random()*200+200);
   wenn(rectr== 0){
    Kontext.beginPath();
    Kontext.StrokeStyle=Farbe();
    Kontext.StrokeRect(Rechteckx,Rechtecky,Rechteckbreite,Rechteckhöhe)
    Kontext.Pfad schließen();
   }
   anders {
    Kontext.beginPath();
    Kontext.Füllstil=Farbe();
    Kontext.fillRect(Rechteckx,Rechtecky,Rechteckbreite,Rechteckhöhe);
    Kontext.Pfad schließen();
   }
  }
  sonst wenn(random == 2){
   var arcr = Math.floor(Math.random()*2);
   var arcx=Math.floor(Math.random()*600);
   var arcy=Math.floor(Math.random()*600);
   var arcr = Math.floor(Math.random()*300);
   wenn(arcr==0){
    Kontext.beginPath();
    Kontext.StrokeStyle=Farbe();
    Kontext.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    Kontext.Strich();
    Kontext.Pfad schließen();
   }
  
   anders{
    Kontext.beginPath();
    Kontext.Füllstil=Farbe();
    Kontext.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    Kontext.Füllen();
    Kontext.Pfad schließen();
   }
  }
  sonst wenn(random==3){
   var movex = Math.floor(Math.random()*600);
   var movey=Math.floor(Math.random()*600);
   var linex = Math.floor(Math.random()*600);
   var liney = Math.floor(Math.random()*600);
   var linew = Math.floor(Math.random()*20);
   Kontext.beginPath();
   Kontext.StrokeStyle=Farbe();
   Kontext.moveTo(movex,movey);
   Kontext.lineTo(linex,liney);
   Kontext.Zeilenbreite=Zeilenbreite;
   Kontext.Strich();
   Kontext.Pfad schließen();
  }
}

Schritt 3

Erstellen Sie abschließend eine Schaltflächenfunktion zum Löschen des Bildschirms. Fügen Sie entsprechend der erstellten Bildschirmgröße context.clearRect(0,0,600,600) in Canvas hinzu, um den Bildschirm zu löschen.

cle.onclick=Funktion(){
  Kontext.beginPath();
  Kontext.clearRect(0,0,600,600);
  Kontext.Pfad schließen();
 }

Klicken Sie, um einen zufälligen Grafikeffekt zu erzeugen!

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:
  • Codebeispiele für die Implementierung mehrerer Grafiken in JavaScript

<<:  Konfigurationsskript für den automatischen Ausgleich von Nginx-Cache-Dateien und dynamischen Dateien

>>:  Was ist Makefile in Linux? Wie funktioniert es?

Artikel empfehlen

Beispielcode für CSS-Bildanimationseffekte (Fotorahmen)

Dieser Artikel stellt den Beispielcode für CSS-Bi...

CSS zur Implementierung von Sprites und Schriftsymbolen

Sprites: In der Vergangenheit war jede Bildressou...

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Wenn eine Website böswillig angefragt wird, ist d...

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

1 Holen Sie sich das Installationsressourcenpaket...

Vue verwendet Filter zum Formatieren von Daten

In diesem Artikelbeispiel wird der spezifische Co...

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

1. Erstellen Sie ein SpringBoot-Projekt und packe...

Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse

Spezifische Methode: Öffnen Sie zuerst die Eingab...

WeChat-Applet implementiert Puzzlespiel

In diesem Artikel finden Sie den spezifischen Cod...

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

1. Einleitung Die EXPLAIN-Anweisung liefert Infor...

Zwei Möglichkeiten zur Implementierung von Square Div mit CSS

Ziel: Erstelle ein Quadrat, dessen Seitenlänge gl...

Muss MySql ein Commit durchführen?

Ob MySQL bei der Ausführung von Vorgängen wie Ein...

Analyse der Anweisungsausführungsreihenfolge von SQL und MySQL

Ich bin heute auf ein Problem gestoßen: Kann ich ...