Heim > Artikel > Web-Frontend > Wie füge ich mit JavaScript eine standardmäßige horizontale Skalierung zu Text im Canvas-Stil hinzu?

Wie füge ich mit JavaScript eine standardmäßige horizontale Skalierung zu Text im Canvas-Stil hinzu?

王林nach vorne: 2023-08-24 10:45:08905Durchsuche

Wir können eine standardmäßige horizontale Skalierung für Text vom Typ „Canvas“ hinzufügen, indem wir auf den Canvas-Kontext zugreifen und die Skalierungseigenschaft auf einen bestimmten Wert festlegen. Dies wird erreicht, indem die Zoom-Methode des Kontexts aufgerufen und der gewünschte horizontale Zoomwert übergeben wird. Dadurch wird auf den gesamten auf der Leinwand gezeichneten Text die standardmäßige horizontale Skalierung angewendet.

HTML-Leinwand

HTML-Canvas ist eine 2D-Zeichenoberfläche, mit der dynamische und interaktive Grafiken, Diagramme und Animationen auf Webseiten erstellt werden können. Es handelt sich um ein HTML-Element, das es Entwicklern ermöglicht, Grafiken mit JavaScript zu zeichnen.

Das Canvas-Element ist ein Container für Grafiken, der die Canvas-API zum Zeichnen von Formen, Text und Bildern verwenden kann. Es handelt sich um ein leistungsstarkes Tool, mit dem Entwickler umfassende, interaktive Benutzererlebnisse im Web erstellen können, ohne externe Bibliotheken oder Plug-Ins zu verwenden.

Methode

Um mithilfe von JavaScript eine standardmäßige horizontale Skalierung zu Text im Canvas-Stil hinzuzufügen, können Sie die folgenden Schritte ausführen −

Erstellen Sie ein Leinwandelement und legen Sie dessen Breite und Höhe fest.
Rufen Sie den 2D-Kontext der Leinwand ab, indem Sie die Methode getContext() aufrufen.
Verwenden Sie die Methode fillText(), um Text auf der Leinwand zu zeichnen.
Legen Sie die standardmäßige horizontale Skalierung fest, indem Sie die Methode „scale()“ im 2D-Kontext aufrufen und den Skalierungsfaktor als erstes Argument übergeben.
Verwenden Sie die Methode fillText(), um Text auf der Leinwand neu zu zeichnen.

Hier ist ein Beispiel, das zeigt, wie diese Aufgabe erledigt werden kann −

// Create a canvas element
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;

// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");

// Draw the text on the canvas
ctx.fillText("Hello World!", 50, 50);

// Set the default horizontal scaling
ctx.scale(1.5, 1);

// Draw the text again on the canvas
ctx.fillText("Hello World!", 50, 50);

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Canvas Text Scaling</title>
</head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         // Get the canvas element by its id
         var canvas = document.getElementById("myCanvas");
         canvas.width = 500;
         canvas.height = 500;
         
         // Get the 2D context of the canvas
         var ctx = canvas.getContext("2d");
         
         // Set the font and text color
         ctx.font = "30px Arial";
         ctx.fillStyle = "black";
         
         // Draw the text on the canvas
         ctx.fillText("Hello World!", 50, 50);
         
         // Set the default horizontal scaling
         ctx.scale(1.5, 1);
         
         // Draw the text again on the canvas
         ctx.fillText("Hello World!", 50, 100);
      </script>
   </body>
</html>

Die chinesische Übersetzung von

Erklärung

lautet:

Erklärung

In diesem Beispiel wird der Text „Hello World!“ mit der standardmäßigen horizontalen Skalierung von 1,5 auf die Leinwand gezeichnet. Das bedeutet, dass der Text horizontal um das 1,5-fache skaliert wird, sodass er auf der Leinwand breiter erscheint. Der Text wird zweimal gezeichnet, zunächst in normaler Größe und dann in 1,5-fach skalierter Größe.

Das obige ist der detaillierte Inhalt vonWie füge ich mit JavaScript eine standardmäßige horizontale Skalierung zu Text im Canvas-Stil hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Das JavaScript-Programm bildet Spulen in MatrixformNächster Artikel：Das JavaScript-Programm bildet Spulen in Matrixform

In Verbindung stehende Artikel

Mehr sehen