Maison >interface Web >tutoriel HTML >L'élément HTML5 Canvas peut-il être créé via le constructeur Canvas ?
L'élément HTML5 Canvas peut-il être créé via le constructeur Canvas ?
- PHPzavant
- 2023-09-06 11:41:071240parcourir
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>
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>
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!