Le dessin dynamique avec Canvas
canvas est un nouvel élément de HTML 5. Celui-ci permet de dessiner des bitmaps dans une page de façon dynamique (via des scripts). En fait, Canvas n’est pas véritablement une nouveauté. L’idée a été introduite par Apple (pour Safari). Elle a ensuite été reprise par la plupart des navigateurs: Firefox (depuis la version 1.5), Opera et Internet Explorer (de façon détournée). Cependant, l’élément canvas n’est pas un élément HTML standard pour le moment. En fait, son implémentation dans HTML 5 ne fait que standardiser les pratiques actuelles.
L’idée de base, c’est de créer un bloc canvas et d’aller dessiner à l’intérieur avec un script. Toute une série de méthodes est mise à disposition pour y arriver. Voici un exemple simple de code:
<html>
<head>
<script type="application/x-javascript">
function draw()
{
// On récupère le canvas et le contexte
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Un rectangle rouge de 55*50 qui se position en 10*10
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 55, 50);
// Un rectangle vert (à moitié transparent) de 55*50 qui se position en 30*30
ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html> |
Cet exemple est véritablement basique. Le champ d’application de l’élément canvas est assez large. On peut imaginer un tas d’application. Par exemple, voyez ce Painter ou bien ce Raycaster.
Ping : Quel sera l’impact de HTML5 sur la vidéo en ligne ? | Webd