Bien évidemment il existe d'autres méthodes associées à la balise canvas et à javascrit.
On peut ainsi modifier les images, faire des dégradés, créer des ombres, faire des animations ….
Un exemple d'animation que vous pouvez essayer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>la balise canvas</title>
<style>body { background: black; } canvas { background: white; }</style>
</head>
<body>
<canvas id="mon_canvas" width="150" height="150">
<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
</canvas>
<script>
var canv1 = document.getElementById('mon_canvas');
var context1 = canv1.getContext('2d');
var dernierX = canv1.width * Math.random();
var dernierY = canv1.height * Math.random();
var hue = 0; // couleur
function animate() {
context1.save();
context1.lineCap = "round";
context1.beginPath();
context1.lineWidth = 5 + Math.random() * 10;
context1.moveTo(dernierX, dernierY);
dernierX = canv1.width * Math.random(); // prochain point
dernierY = canv1.height * Math.random();
context1.bezierCurveTo(canv1.width * Math.random(), canv1.height * Math.random(),
canv1.width * Math.random(), canv1.height * Math.random(), dernierX, dernierY);
hue = hue + 10 * Math.random(); // modification de la couleur
context1.strokeStyle = "hsl("+ hue +",50%,50%)";
context1.shadowColor = "white";
context1.shadowBlur = 10;
context1.stroke();
context1.restore();
}
function assombrir() {
context1.fillStyle = "rgba(0,0,0,0.1)";
context1.fillRect(0, 0, canv1.width, canv1.height);
}
setInterval(animate, 100);
setInterval(assombrir, 40);
</script>
</body>
</html>
Pour compléter ce TP :
- sur le site "openclass Room" il y a une formation javascript avec une rubrique sur <canvas> (https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript )
- parmi les multiples ressources disponibles sur internet nous vous recommandons : http://www.installations-electriques.net/Logiq/canvas/Canvas.htm