L'élément HTML5 Canvas peut-il être créé via le constructeur Canvas ?-tutoriel HTML-php.cn

L'élément HTML5 Canvas peut-il être créé via le constructeur Canvas ?

PHPz

Libérer： 2023-09-06 11:41:07

avant

1285 Les gens l'ont consulté

Lélément HTML5 Canvas peut-il être créé via le constructeur Canvas ?

Dans cet article, nous verrons comment créer un élément de canevas HTML5 à partir du constructeur de canevas. Nous pouvons réaliser cette tâche en utilisant l'élément

Avant de plonger dans les exemples, comprenons d’abord la définition et l’utilisation de l’élément

Canvas Api peut être utilisé pour dessiner des graphiques via des éléments javascript et html

L'API Canvas se concentre en grande partie sur les effets visuels 2D. L'API WebGL restitue des effets visuels 2D et 3D accélérés par le matériel à l'aide de l'élément

Voyons l'exemple suivant pour mieux comprendre le constructeur de canevas

Utilisez la méthode getElementId()

L'élément avec la valeur donnée est renvoyé par la fonction getElementById(). Si l'élément n'existe pas, la fonction getElementById() renvoie null. L'une des méthodes les plus couramment utilisées dans HTML DOM est getElementById().

Exemple

Dans l'exemple ci-dessous, nous utilisons getElementId() pour accéder à l'élément

<!DOCTYPE html> 
<html> 
<body> 
   <canvas id="tutorial1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
   <p>Click To Apply Canvas</p> 
   <button onclick="mytutorial()">CLICK</button>
   <script> 
      function mytutorial() { 
         var c = document.getElementById("tutorial1");
         var ctx = c.getContext("2d"); 
         ctx.fillStyle = "#D6EAF8"; 
         ctx.fillRect(20, 20, 150, 100);
      } 
   </script> 
</body> 
</html>

Copier après la connexion

Lorsque le script est exécuté, il accède à l'élément

Si l'utilisateur clique sur le bouton, le canevas sera appliqué à la page Web.

Utilisez la méthode createElement()

La méthode HTML DOM createElement() est utilisée pour créer dynamiquement des éléments HTML à l'aide de JavaScript. Il construit le nœud d'élément spécifié avec le nom de l'élément comme argument.

Exemple

Considérez l'exemple suivant dans lequel nous utilisons createElement() pour créer un élément

<!DOCTYPE html> 
<html> 
   <style> canvas { border: 1px solid black; } </style> 
<body> 
   <button onclick="mytutorial()">CLICK</button>
   <p>Click To Create Canvas</p> 
   <script> 
      function mytutorial() { 
         var x = document.createElement("CANVAS"); 
         var ctx = x.getContext("2d");
         ctx.fillStyle = "#ABEBC6"; 
         ctx.fillRect(20, 20, 150, 100);
         document.body.appendChild(x);
      } 
   </script> 
</body> 
</html>

Copier après la connexion

Lorsque vous exécutez le script ci-dessus, il génère une sortie contenant l'invite « Cliquez pour créer un canevas » et le bouton « Cliquez ».

Lorsque l'utilisateur clique sur le bouton, la méthode createElement() obtiendra l'accès et créera le canevas sur la page Web.

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!