10.1 Bases du travail avec Canvas
Canvas API offre aux développeurs de bons outils pour créer des graphiques et des animations 2D dans les applications web. Dans cette conférence, nous allons examiner les bases du travail avec Canvas API, y compris la création d'éléments, le dessin de graphiques et la création d'animations.
Création de l'élément <canvas>
L'élément <canvas> en HTML est utilisé pour créer une zone de dessin où vous pouvez effectuer diverses opérations graphiques :
<canvas id="myCanvas" width="800" height="600"></canvas>
Obtention du contexte de dessin
Pour effectuer des opérations de dessin sur l'élément <canvas>, il est nécessaire d'obtenir le contexte de dessin. Pour les graphiques 2D, on utilise le contexte 2d :
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Dessiner sur Canvas
1. Rectangles
Canvas API fournit des méthodes pour dessiner des rectangles remplis et contournés.
Rectangle rempli — fillRect :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Contour du rectangle — strokeRect :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Nettoyage de la zone
La méthode clearRect est utilisée pour nettoyer une zone spécifique :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Lignes
Pour dessiner des lignes, utilisez la méthode beginPath pour commencer un nouveau chemin et les méthodes moveTo et lineTo pour définir les coordonnées des lignes :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Cercles et arcs
La méthode arc est utilisée pour dessiner des cercles et des arcs :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Texte
Les méthodes fillText et strokeText sont utilisées pour dessiner du texte :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. Dégradés
Canvas API prend en charge la création de dégradés linéaires et radiaux.
Dégradé linéaire :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Dégradé radial :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Images
La méthode drawImage est utilisée pour dessiner des images sur Canvas :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Animations sur Canvas
Pour créer des animations, on utilise la méthode requestAnimationFrame, qui appelle la fonction spécifiée pour dessiner un nouveau cadre de l'animation.
1. Bases de l'animation
Exemple d'animation simple :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Animations complexes
Exemple d'animation d'un cercle :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Utilisation des minuteries
Pour créer des animations, vous pouvez également utiliser les méthodes setInterval et setTimeout.
Exemple d'animation avec setInterval :
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION