Les bases de l'API de dessin 2D et le canvas (partie 1)

Attention ! Cet article a plus de 1 an (3232 jours), ce qui signifie qu'il n'est pas forcément à jour !

Canvas fait maintenant parti des spécifications du HTML5. Voici les bases pour savoir comment l’utiliser.

Bon, peut-être n’êtes-vous ici que pour savoir sur quels navigateurs CANVAS est supporté ? Alors, voici cette information pour commencer.

Navigateurs Version
Chrome 10+
FireFox 4.0+
Opera 9+
Internet Explorer 9.0+
Safari 3.0+

Maintenant que cette information est divulguée, qu’est ce que le CANVAS? Ce dernier vous permet de dessiner n’importe quoi directement dans le navigateur web sans l’utilisation de flash, JAVA, ou n’importe quoi d’autre. Le canvas est un API de dessin 2D, un espace rectangulaire où le navigateur vous permet de dessiner à l’intérieur. Canvas fait maintenant parti des spécifications du HTML5. Voici rapidement un petit exemple de ce que pourrait ressembler un canvas à l’intérieur de la balise BODY:

<canvas width="500" height="500" id="canvas"></canvas>
<script> var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    c.fillStyle = "#ff5533";
    c.fillRect(50,50,300,150);
</script> 

Ce qui donne ceci: Exemple de Canvas

Canvas diffère du SVG. Ce dernier est un API pour dessiner des formes vectorielles. Chaque formes dessinées peuvent avoir des évènements attachés et étant vectorielles, vous pouvez les agrandir sans que cela devienne pixelisée, comme avec le canvas. Vous ne pouvez affecter les formes créées sur le canvas avec du CSS. En fait, vous pourrez affecter le canvas en soit avec une couleur de fond, une bordure et c’est pas mal tout. Canvas s’avère être un excellent outils pour afficher des chartes, graphiques, diagrammes et des jeux vidéos. Oui oui, des jeux vidéos! Quelques exemples de jeux utilisant le canvas.

Mon exemple de rectangle orange était assez simple. En fait, canvas ne supporte que les formes rectangle. Pour dessiner d’autres formes, vous devez utiliser une trajectoire, appelé "path". Dans le canvas vous devez premièrement définir un path en utilisant la fonction beginPath(), ensuite vous le remplissez, lui mettez une bordure, etc. Vous utilisez ensuite diverses fonction : moveTo(), lineTo(), et bezierCurveTo() pour relier chaque segments ou lignes. Comment fait-on pour une forme différente comme un triangle alors ? Voici un exemple alors de triangle.

<canvas width="800" height="600" id="canvas"></canvas> 
<script> 
    var c = document.getElementById('canvas');
    var c = canvas.getContext('2d'); 
    c.fillStyle = '#cccccc';
    c.beginPath();
    c.moveTo(50,50);
    c.lineTo(200,150);
    c.lineTo(10,80);
    c.closePath();
    c.fill();
    c.strokeStyle = 'rgb(0,10,0)';
    c.lineWidth = 3;
    c.stroke(); 
</script>

Voici un autre exemple en utilisant plusieurs types de lignes pour dessiner sur le canvas. et le code:

<canvas width="800" height="600" id="canvas"></canvas> 
 <script> 
 var c = document.getElementById('canvas');
 var c = canvas.getContext('2d'); 
 c.fillStyle = '#c99cdd';
 c.beginPath();
 c.moveTo(20,30);
 c.bezierCurveTo(50,100,200,-80,200,90);
 c.lineTo(200,90);
 c.lineTo(10,90);
 c.closePath();
 c.fill();
 c.lineWidth = 2;
 c.strokeStyle = 'black';
 c.stroke();

 var context = canvas.getContext('2d');
 var centerX = 165;
 var centerY = 40;
 var radius = 5;
 context.beginPath();
 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = '#94c4f1';
 context.fill();
 context.lineWidth = 2;
 context.strokeStyle = '#003300';
 context.stroke();
 </script>

Canvas peut permettre de dessiner des images avec la fonction drawImage(). Vous pouvez directement appliquer l’image sur l’écran, l’étirer et la couper. Étirer et couper peut être vraiment pratique pour des effets dans les jeux, l’interpolation d’image étant souvent plus rapide que d’autre méthode de transition. Voici un exemple et le code:

<canvas width="800" height="600" id="canvas"></canvas> 
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

 imageObj.onload = function() {
 context.drawImage(imageObj, 0, 210);
 context.drawImage(imageObj,0,0,300,200,0,0,150,200 );
 context.drawImage(imageObj,0,0,300,150, 160,0,280,200);
 };
 imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
 </script>

Canvas pour afficher du texte.

 <canvas width="800" height="600" id="canvas"></canvas> 
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 context.fillStyle = "#989898";
 context.font = "normal "+20+"pt Helvetica";
 context.fillText("Voici du texte", 50,100);
 </script> 

Canvas pour des dégradés.

 <canvas width="800" height="600" id="canvas"></canvas> 
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 var grad = context.createLinearGradient(0,0,200,0); 
 grad.addColorStop(0, "white"); 
 grad.addColorStop(0.5, "#3b75a4");
 grad.addColorStop(1, "#1b4466");
 context.fillStyle = grad;
 context.fillRect(0,0,400,200);
 </script> 

Voilà un peu pour les bases. Je vais approfondir le sujet du canvas au travers de prochains articles.

-UPDATE- Finalement je suis tombé sur un article super complet sur le Canvas. Je ne crois donc pas que je vais faire une suite à mes articles. Voici:

http://www.alsacreations.com/tuto/lire/1484-introduction.html

Catégories :

HTML CSS