Comment ajouter une mise à l'échelle horizontale par défaut au texte de type canevas à l'aide de JavaScript ?-js tutoriel-php.cn

Comment ajouter une mise à l'échelle horizontale par défaut au texte de type canevas à l'aide de JavaScript ?

王林

Libérer： 2023-08-24 10:45:08

avant

981 Les gens l'ont consulté

Comment ajouter une mise à léchelle horizontale par défaut au texte de type canevas à laide de JavaScript ?

Nous pouvons ajouter une mise à l'échelle horizontale par défaut pour le texte de type canevas en accédant au contexte du canevas et en définissant la propriété scale sur une valeur spécifique. Ceci est accompli en appelant la méthode de zoom du contexte et en transmettant la valeur de zoom horizontal souhaitée. En faisant cela, tout le texte dessiné sur le canevas aura la mise à l'échelle horizontale par défaut appliquée.

Toile HTML

Le canevas HTML est une surface de dessin 2D qui peut être utilisée pour créer des graphiques, des graphiques et des animations dynamiques et interactifs sur des pages Web. Il s'agit d'un élément HTML qui permet aux développeurs de dessiner des graphiques à l'aide de JavaScript.

L'élément canevas est un conteneur de graphiques qui peut utiliser l'API canevas pour dessiner des formes, du texte et des images. Il s'agit d'un outil puissant qui permet aux développeurs de créer des expériences utilisateur riches et interactives sur le Web sans utiliser de bibliothèques ou de plug-ins externes.

Méthode

Pour ajouter une mise à l'échelle horizontale par défaut au texte de type canevas à l'aide de JavaScript, vous pouvez suivre ces étapes −

Créez un élément de toile et définissez sa largeur et sa hauteur.
Obtenez le contexte 2D du canevas en appelant la méthode getContext().
Utilisez la méthode fillText() pour dessiner du texte sur le canevas.
Définissez la mise à l'échelle horizontale par défaut en appelant la méthode scale() sur le contexte 2D et en passant le facteur de mise à l'échelle comme premier argument.
Utilisez la méthode fillText() pour redessiner le texte sur le canevas.

Voici un exemple montrant comment accomplir cette tâche −

// 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);

Copier après la connexion

La traduction chinoise de

Exemple

est :

Exemple

<!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>

Copier après la connexion

La traduction chinoise de

Explication

est :

Explication

Dans cet exemple, le texte « Hello World ! » est dessiné sur la toile avec la mise à l'échelle horizontale par défaut de 1,5. Cela signifie que le texte sera mis à l'échelle 1,5x horizontalement, ce qui le fera apparaître plus large sur le canevas. Le texte sera dessiné deux fois, d’abord à taille normale et ensuite à une taille agrandie de 1,5x.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!