Cet article présentera un aperçu de HTML Canvas ; comme vous le savez déjà, HTML est un langage de balisage. Pour présenter des informations au visiteur, vous pouvez écrire du HTML avec le texte à afficher et comment il sera affiché, c'est-à-dire la taille de la police, la couleur, l'orientation, etc. Lorsqu'il s'agit d'ajouter des visuels à une page, vous devez créer un lien et intégrez des images à la page, qui sont stockées séparément du fichier HTML sur votre hôte.
Mais que se passe-t-il si vous avez besoin de dessiner quelque chose sur la page ?
Le canevas HTML (utilisé via la balise
Syntaxe :
<canvas id="example" width="200" height="200"> <em>Content here</em> </canvas>
Vous pouvez définir la taille du canevas via les attributs width et height ; un ID d'élément peut également être défini dans la balise, ce qui permet d'utiliser des styles CSS sur l'élément canevas. Voici un exemple de la façon dont vous pouvez dessiner un rectangle à l'aide de l'élément Canvas :
Code :
<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>Sortie :
Maintenant que vous avez vu comment dessiner un rectangle à l'aide de l'élément canvas, examinons quelques autres objets qui peuvent être dessinés à l'aide de l'élément sur l'écran de sortie d'un navigateur.
moveTo(), Stroke() et lineTo() sont des méthodes qui peuvent être utilisées pour tracer des lignes droites sur une page Web. Comme vous pouvez le deviner, moveTo() indique la position du curseur dans l'espace de l'élément, et lineTo() est la méthode qui indique le point final de la ligne. Le trait() rend la ligne visible. Voici le code pour votre référence :
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>Sortie :
Contrairement aux rectangles, il n'existe pas de méthode particulière en JavaScript pour dessiner un cercle. Au lieu de cela, nous pouvons utiliser la méthode arc(), qui est utilisée pour dessiner des arcs afin de dessiner un cercle dans le canevas. Pour obtenir une toile avec un cercle dessus, vous pouvez utiliser ce qui suit :
Syntaxe :
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Voici un exemple de page avec un cercle :
Code :
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>Sortie :
Le texte peut également être dessiné dans un canevas HTML. Pour placer du texte sur votre canevas, vous pouvez utiliser la méthode filltext(). Voici un exemple de page HTML contenant du texte à l'intérieur d'un élément canevas :
Code :
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>Sortie :
Comme nous en avons discuté avec un cercle, il existe une méthode appelée arc() qui est utilisée pour dessiner des arcs dans HTML Canvas. Voici la syntaxe de la méthode où il ne vous reste plus qu'à ajouter votre variable :
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Voici une page HTML qui comporte un arc à l'intérieur d'un élément canevas :
Code :
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>Sortie :
Vous pouvez utiliser cette méthode pour createLienearGradient() afin de dessiner les dégradés de votre choix à l'intérieur de l'élément canvas. Avec cette méthode, vous devrez utiliser addColorStop() pour désigner les couleurs dégradées.
Syntaxe :
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Voici une page qui a un dégradé linéaire :
Code :
<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>
</body>
</html>Sortie :
De même, la méthode de dessin de dégradés circulaires est createRadialGradient().
Syntaxe :
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Code :
<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>Sortie :
Maintenant que vous savez de quoi il s'agit et comment il peut être utilisé dans des pages Web, vous devriez avoir plus confiance en vos compétences en matière de conception de sites Web. Bien que les images puissent être utilisées dans certains cas, l'avantage du canevas HTML est qu'il est évolutif et beaucoup plus léger en termes de taille et de puissance de traitement.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
