HTML5 -Canvas ist ein leistungsstarkes Zeichenwerkzeug, für das JavaScript Grafikzeichnung und -animation implementiert werden muss. 1. Vor der Verwendung müssen Sie das Canvas -Element erhalten und GetContext ('2D') aufrufen, um den 2D -Kontext zu erhalten. 2. Stellen Sie die Breite und H?henattribute von Leinwand ein, um Unsch?rfe zu vermeiden. 3.. Sie k?nnen Fillrect und Strokerect verwenden, um Rechtecke zu zeichnen oder mit BeginnPath, MoveTo, Lineto und anderen Methoden komplexe Pfadgrafiken wie Dreiecke zu zeichnen. V. 5. Die DrawImage -Methode kann Bilder zeichnen, und die interaktive Logik, z. B. Klickerkennung, kann durch Anh?ren von Mausereignissen erreicht werden. Leinwand ist flexibel und effizient für Spiel- und Visualisierungsprojekte.

Das Canvas -Element ist ein leistungsstarkes Tool, das von HTML5 bereitgestellt wird, mit dem Grafiken und Animationen gezeichnet werden k?nnen. Es ist selbst ein leerer rechteckiger Bereich ohne integrierte Zeichnungsfunktionalit?t, aber mit JavaScript k?nnen wir frei Formen, Text, Bilder und dynamische Animationen auf dieser Leinwand erstellen.

Vorbereitung: Holen Sie sich den Kontext und setzen Sie die Grundlagen

Bevor Sie Canvas verwenden, müssen Sie zuerst das Canvas -Element über die DOM erhalten und dann getContext() aufrufen, um den Zeichnungskontext zu erhalten. Meistens verwenden wir einen 2D -Kontext, der die Hauptmethode ist, um mit flachen Grafiken und Animationen umzugehen.

 const canvas = document.getElementById ('mycanvas');
const ctx = canvas.getContext ('2d');

Stellen Sie sicher, dass das Breiten- und H?henattribut für Leinwand in HTML festgelegt ist, ansonsten kann Unsch?rfe oder Dehnung auftreten. Standardm??ig betr?gt die Gr??e der Leinwand 300x150 Pixel, die wir normalerweise entsprechend unseren Anforderungen einstellen müssen:

 <canvas id = "mycanvas" width = "800" height = "600"> </canvas>

So zeichnen Sie grundlegende Grafiken

Leinwand bietet einige einfache APIs, um grundlegende Grafiken wie Rechtecke, Pfade (Linien), Kreise usw. zu zeichnen. Zum Beispiel ist das Zeichnen eines Füllrechtecks sehr einfach:

 Ctx.FillStyle = 'Blue';
Ctx.FillRect (50, 50, 200, 100);

Dieser Code zeichnet ein blaues Rechteck 200 breit und 100 hoch bei (50,50). Wenn Sie Grenzen anstelle von Füllen zeichnen m?chten, k?nnen Sie strokeRect verwenden.

Für komplexere Formen wie Dreiecke oder Polygone ist die Pfadmethode erforderlich:

• Starten Sie einen neuen Weg mit beginPath()
• Verwenden Sie moveTo() und lineTo() um Punkte zu definieren
• Schlie?lich wird closePath() verwendet, um mit FILD () oder STROKE () zu conepath () und mit fill() oder stroke() zu rendern.

Zum Beispiel:

 ctx.beginPath ();
ctx.moveto (100, 100);
ctx.lineto (150, 50);
ctx.lineto (200, 100);
ctx.closepath ();
ctx.fill ();

Dies zeichnet ein Dreieck.

Wichtige Tipps zum Erstellen einfacher Animation

Um Animation auf Leinwand zu implementieren, besteht die Kernidee darin, "die Leinwand st?ndig neu zu streichen". Normalerweise kombinieren wir requestAnimationFrame() -Methode, um reibungslose Animationseffekte zu erzielen.

Der Grundprozess ist wie folgt:

• L?schen Sie den aktuellen Canvas -Inhalt
• Aktualisieren Sie den Speicherort oder einen anderen Status der Grafik
• Zeichnen Sie die Grafiken neu

Bewegen Sie beispielsweise einen Kreis von links nach rechts:

 sei x = 0;

Funktion animate () {
  ctx.clearRect (0, 0, canvas.width, canvas.height); // die Leinwand ctx.beginPath () l?schen;
  ctx.arc (x, 100, 30, 0, math.pi * 2);
  Ctx.FillStyle = 'rot';
  ctx.fill ();
  x = 2;
  RequestAnimationFrame (Animate);
}

animieren();

In diesem Beispiel l?schen wir die Leinwand in jedem Rahmen, dann den Kreis neu und lassen ihn nacheinander ein wenig nach rechts bewegen. requestAnimationFrame optimiert automatisch den Animations -Rhythmus gem?? der Browser -Aktualisierungsrate.

Ein paar Punkte zu beachten:

• Die Animationsgeschwindigkeit wird durch die Bildrate beeinflusst und die Geschwindigkeit kann durch Steuern des Aktualisierungsschritts (z. B. x = 2 oben) eingestellt werden.
• Wenn sich mehrere Objekte bewegen müssen, wird empfohlen, ihren Status in Variablen zu speichern und einheitlich zu verwalten
• Komplexe Animationen sollten Leistungsprobleme berücksichtigen, h?ufiges DOM -Betrieb vermeiden oder komplexe Berechnungen durchführen

Grundlegende Verarbeitung von Bildern und Interaktionen

Canvas unterstützt auch das Zeichnen von Bildern, was für Spieleentwicklung oder Visualisierungsprojekte sehr nützlich ist. Sie k?nnen das Bild auf der Leinwand über drawImage() zeichnen:

 const img = new Image ();
img.src = 'example.png';
img.onload = () => {
  ctx.drawimage (IMG, 10, 10);
};

Wenn Sie m?chten, dass das Bild auf Benutzeroperationen reagiert, z. B. auf Klicken oder Ziehen, müssen Sie sich das Mausereignis anh?ren und beurteilen, ob sie den Bildbereich basierend auf den Koordinaten klicken sollen. Dieser Schritt ist etwas komplizierter, sodass die Position jedes Bildes aufgezeichnet und festgestellt wird, ob es sich in einem bestimmten Bereich befindet, wenn er klickt.

Bestimmen Sie beispielsweise, ob der Klick im Rechteck auftritt:

 canvas.addeventListener ('klick', (e) => {
  const rect = canvas.getBoundingClientRect ();
  const mousex = e.clientx - rect.left;
  const mausy = e.clienty - rect.top;

  if (mousex> 50 && mousex <250 && mousey> 50 && mousey <150) {
    console.log (&#39;im Rechteck geklickt!&#39;);
  }
});

Dieser Teil der Logik kann entsprechend den tats?chlichen Bedürfnissen erweitert werden, z. B. das Hinzufügen von Skalieren, Ziehen und Ablegen von Funktionen.

Insgesamt ist HTML-Leinwand ein flexibles und featurereiches Zeichenwerkzeug. Solange Sie die grundlegenden Zeichenmethoden und Animationsmechanismen beherrschen, k?nnen Sie verschiedene visuelle Effekte erzielen. Obwohl es nicht mit einem eigenen Struktur- und Ereignissystem wie SVG ausgestattet ist, machen es seine Leistungsvorteile und die Freiheit in Bereichen wie Spiele und Datenvisualisierung sehr beliebt.

Das obige ist der detaillierte Inhalt vonZeichnen von Grafiken und Animationen mit dem HTML -Canvas -Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!