API Canvas JavaScript
Introduction à l'API Canvas HTML avec JavaScript
L'HTML <code><canvas></code> est un outil essentiel pour dessiner des graphiques sur une page web via JavaScript. Que vous soyez débutant en JavaScript ou que vous souhaitiez perfectionner vos compétences, cet article vous guidera à travers des exemples détaillés et des explications complètes sur la façon d'utiliser l'élément canvas pour créer du contenu web dynamique et interactif.
Comprendre l'élément 'canvas'
L'élément <code><canvas></code> en HTML5 crée une surface de dessin de taille fixe qui peut être utilisée pour rendre des graphiques à la volée. Il est particulièrement utile pour les applications intensives en graphiques comme les jeux, le tracé de graphiques ou toute animation interactive. Le canvas est un conteneur pour les graphiques ; vous devez utiliser JavaScript pour réellement dessiner les graphiques.
Configuration de base du Canvas
Pour commencer à dessiner avec le canvas, vous devez d'abord insérer une balise <code><canvas></code> dans votre HTML. Voici un exemple de base pour vous aider à démarrer :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>
</body>
</html>Dans cette configuration, nous définissons une zone de canvas dans le HTML, la stylons avec une bordure simple et obtenons son contexte de dessin en JavaScript en utilisant getContext('2d'). C'est dans ce contexte que toutes les méthodes de dessin seront appliquées.
Dessiner des formes
Pour un exemple simple de dessin de formes, considérez ce code pour dessiner un rectangle rempli. La méthode fillRect est utilisée, qui nécessite les coordonnées du coin supérieur gauche ainsi que la largeur et la hauteur du rectangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rectangle Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="rectangleCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('rectangleCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000'; // Set the fill color to red
ctx.fillRect(20, 20, 150, 100); // Draw the rectangle
</script>
</body>
</html>Créer des lignes
Dessiner une ligne implique de commencer un tracé et de déplacer le curseur de dessin avec moveTo, puis d'étendre le tracé jusqu'à un nouveau point avec lineTo, et enfin de tracer le contour du tracé pour le rendre visible :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Drawing Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="lineCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('lineCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath(); // Start the path
ctx.moveTo(50, 50); // Move the pen to (50, 50)
ctx.lineTo(150, 50); // Draw a line to (150, 50)
ctx.stroke(); // Render the line visible
</script>
</body>
</html>Opérations avancées sur le Canvas
Transformations du Canvas
Des transformations comme translate, rotate et scale vous permettent de modifier le système de coordonnées du canvas. Elles peuvent être très puissantes pour créer des dessins complexes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transformation Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="transformCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('transformCanvas');
const ctx = canvas.getContext('2d');
ctx.translate(50, 50); // Move the canvas origin to (50, 50)
ctx.rotate((Math.PI / 180) * 25); // Rotate the canvas 25 degrees
ctx.fillStyle = 'blue'; // Set fill color to blue
ctx.fillRect(0, 0, 100, 50); // Draw a rectangle
</script>
</body>
</html>Animations avec le Canvas
Animer avec le canvas implique généralement de créer une fonction qui met à jour le dessin du canvas de manière répétée en utilisant requestAnimationFrame :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="animationCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('animationCanvas');
const ctx = canvas.getContext('2d');
let x = 0; // Starting position
function drawFrame() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas for the new frame
ctx.fillStyle = 'green'; // Set the fill color to green
ctx.fillRect(x, 20, 50, 50); // Draw a moving rectangle
x++; // Increment the horizontal position
if (x > canvas.width) {
x = 0;
}
requestAnimationFrame(drawFrame); // Continue the animation
}
drawFrame();
</script>
</body>
</html>Conclusion
L'élément HTML <code><canvas></code> offre un vaste terrain de jeu aux développeurs web pour exprimer leur créativité et implémenter des graphiques et animations dynamiques. En tirant parti de JavaScript, les développeurs peuvent créer des designs complexes et des expériences interactives directement dans le navigateur, faisant du canvas un outil inestimable pour des applications allant de simples visualisations de données à des jeux complexes et des outils d'apprentissage interactifs. Comme nous l'avons vu à travers ces exemples, les utilisations potentielles du canvas sont limitées uniquement par l'imagination et les compétences techniques, offrant un support puissant pour enrichir le contenu web et l'engagement des utilisateurs.
Pratique
Que pouvez-vous faire avec l'élément Canvas en JavaScript selon le contenu trouvé sur w3docs.com ?