Introduction à HTML Canvas
Dans cet article, nous verrons un aperçu sur 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 lier et incorporer des images à la page, qui sont stockées séparément du fichier HTML sur votre hôte.
Mais que faire si vous avez besoin de dessiner quelque chose sur la page?
Qu'est-ce que HTML Canvas?
Le canevas HTML (utilisé via une balise) est un élément HTML utilisé pour dessiner des graphiques (lignes, barres, graphiques, etc.) sur l'écran de l'ordinateur de l'utilisateur à la volée. L'élément canvas n'est cependant qu'un conteneur pour les informations, le dessin se fait via JavaScript. Il est pris en charge par tous les navigateurs Web modernes qui prennent en charge HTML5 et peuvent rendre JavaScript. La création d'un canevas HTML est très simple et vous pouvez l'ajouter à n'importe quelle page HTML via ce qui suit.
Syntaxe:
Content here
Vous pouvez définir la taille du canevas via l'attribut width et height, un ID d'élément peut également être défini dans la balise 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:
#examplecanvas(border:2px solid green;)
Production:
Exemples de dessin de toile HTML
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 un écran de sortie du navigateur.
1. Tracer une ligne sur une page
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:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Production:
2. Dessiner un cercle sur HTML Canvas
Contrairement aux rectangles, il n'y a 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 pour 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:
Canvas with a circle
canvas (
border: 3px solid red;
)
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();
);
Production:
3. Dessiner un texte dans HTML Canvas
Le texte peut également être dessiné dans un canevas HTML. Pour obtenir du texte sur votre toile, vous pouvez poursuivre la méthode filltext (). Voici un exemple de page HTML contenant du texte à l'intérieur d'un élément canvas:
Code:
canvas with text inside the element
canvas (
border: 3px solid red;
)
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);
);
Production:
4. Tracer un arc à l'intérieur d'un canevas HTML
Comme nous l'avons vu avec un cercle, il existe une méthode appelée arc () qui est utilisée pour dessiner des arcs à l'intérieur de HTML Canvas. Voici la syntaxe de la méthode où tout ce que vous avez à faire est d'ajouter votre variable:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Voici une page HTML qui a un arc à l'intérieur d'un élément canvas:
Code:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
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();
);
Production:
5. Dessin d'un dégradé de couleurs linéaire ou circulaire
Vous pouvez utiliser cette méthode pour créerLienearGradient () pour dessiner des 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:
If you are seeing this. the browser does not support the HTML5 canvas.
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);
Production:
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:
If you are seeing this. the browser does not support the HTML5 canvas.
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);
Production:
Conclusion
Maintenant que vous savez ce qu'est le canevas HTML et comment il peut être utilisé dans les pages Web, vous devriez avoir plus confiance en vos compétences en conception 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.
Article recommandé
Ceci est un guide de HTML Canvas. Nous discutons ici de ce qu'est HTML Canvas et de ses exemples ainsi que de l'implémentation et de la sortie du code. Vous pouvez également consulter nos articles suggérés pour en savoir plus -
- Les 16 principaux attributs de style HTML
- HTML vs HTML5 | Les 9 meilleures comparaisons
- WebGL vs Canvas - principales différences
- Les 40 principales questions d'entrevue HTML
- Définir une couleur d'arrière-plan en HTML avec l'exemple