La méthode rectangle de Canvas

Le tracé d'un rectangle sur la surface graphique de HTML 5 avec rect ou fillRect dispose de nombreux paramètres.

Jeu du mur de briques

L'API Canvas n'offre que quelques formes simples mais on peut faire beaucoup avec, par exemple avec une figure aussi simple que le rectangle ainsi qu'avec la méthode pour tracer un cercle, et quelques lignes JavaScript, on dispose de tous éléments nécessaires pour réaliser le jeu du mur de brique. On trouvera plus loin un lien sur un code source très simple qui montre comment.

Puisque les attributs de couleur et d'épaisseur de trait sont définis de la même façon que pour les lignes, nous allons surtout expliquer les fonctions propres au rectangle, vide ou plein.

La méthode rect à quatre paramètres

rect(x, y, w, h)

Les arguments sont les coordonnées du point supérieur gauche, la longueur horizontale, la longueur verticale.

Exemple:

Requiert un navigateur récent.

Code complet

<canvas id="canvas1" width="400" height="120">
Requiert un navigateur récent: Internet Explorer 9, Chrome, Firefox, Safari.
</canvas>
<script type="text/javascript">

function rectangle()
{
  var canvas = document.getElementById("canvas1"); 
  var context = canvas.getContext("2d");
  context.beginPath();
  context.strokeStyle="blue";   
  context.lineWidth="2";   
  context.rect(10,10,200,100);
  context.stroke();
}

window.onload=rectangle;
</script>

Un rectangle est rempli avec la fonction fill

La méthode fill() permet de remplir une forme quelconque. La couleur est donnée par l'attribut fillStyle tandis que la couleur du tracé, en l'occurence la bordure du rectangle est donnée par l'attribut strokeStyle.

Requiert un navigateur récent.

Code

<script type="text/javascript">
function rectangle1() {
  var canvas = document.getElementById("canvas2"); 
  var context = canvas.getContext("2d");
  context.beginPath();
  context.strokeStyle="blue";   
  context.lineWidth="2";   
  context.rect(10,10,200,100);
  context.fillStyle="yellow";
  context.fill();
  context.stroke();
}
rectangle1();
</script>

Mais la fonction fillRect est plus simple

La méthode fill de context est une méthode générale, qui s'applique à tout forme fermée, qu'elle soit formée de lignes droites, de courbes, ou de figures géométriques.

La méthode fillRect dessine spécifiquement un rectangle plein. La différence est qu'il n'a pas de tracé de bordure, contrairement à l'autre cas.

Exemple de rectangle plein avec rectFill:

Requiert un navigateur récent.

Code

function rectangle3() {
  var canvas = document.getElementById("canvas3"); 
  var context = canvas.getContext("2d");
  context.fillStyle="yellow";
  context.fillRect(10,10,200,100);
}
rectangle3();

Le code est simplifié...

Dans un prochain chapitre, nous allons voir comment dessiner un rectangle aux coins arrondis, mais il faut d'abord apprendre comment tracer des arcs.

Vous pouvez aussi savoir...