Logo de Radio-Canada en canvas HTML5

Pour poursuivre l'exploration du canvas HTML5, je me suis dit qu'un petit exercice pour mieux comprendre l'utilisation des cercles serait intéressant. J'ai choisi de reproduire le pattern du logo de la société Radio-Canada en HTML5, sans me soucier pour l'instant de l'espacement exact entre les éléments qui le composent.



On construira le logo en commençant par l'extérieur car le plus gros problème sera d'arriver à reproduire les arcs externes qui sont tronquées sans dessiner par-dessus les portions existantes. C'est pourquoi je les créerai en premier et j'effacerai dès le départ la zone superflue du cercle.

Pour commencer, créer 4 cercles complets (aux extrémités d'un +).

var context = canvas.getContext('2d');

context.fillStyle = '#FC0814'; // le logo est rouge

// haut
context.beginPath();
// centre(x, y), rayon, angle de départ, angle final, anticlockwise
context.arc(150, 50, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// gauche
context.beginPath();
context.arc(50, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// droite
context.beginPath();
context.arc(250, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// bas
context.beginPath();
context.arc(150, 250, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

On efface un carré à l'intérieur pour ne conserver que l'extrémité des arcs.

context.clearRect(25, 25, 250, 250); // x, y, width, height

Une fois le centre libre, on place un cercle de même rayon en plein milieu.

context.beginPath();
context.arc(150, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

Ici, j'aurais pu construire un autre + de cercles à l'intérieur et effacer, comme on vient de le faire, une zone carrée en plein milieu pour y dessiner ensuite le cercle central. En cours de route, j'ai décidé d'aller de l'avant avec une méthode alternative, question que ce tutoriel soit plus formateur. Nous allons dessiner des demi-cercles en travaillant avec des angles de départ et d'arrivée.

Les angles sont calculés en radians (vous verrez plus loin comment les obtenir à partir des degrés). Ce qu'il faut comprendre, c'est que l'angle de départ commence toujours à l'extrémité droite du cercle sur l'axe des x (considéré 0 et 360 degrés, 0Π ou 2Π ou à 3h sur une horloge). En tournant dans le sens des aiguilles d'une montre, 90 degrés (ou Π/2) sera à 6h (ou au point cardinal sud), 180 degrés (ou Π) sera à 9h (à l'ouest) et 270 degrés (3Π/2) sera à midi (au nord).

Si le concept des radians vous répugne, vous pouvez simplement appliquer cette formule mathématique pour convertir des degrés (0 à 360) en radians :

var degres = 90;
var radians = degres * (Math.PI/180);

J'utilise les deux façons dans le code qui suit :

// haut
context.beginPath();
context.arc(150, 85, 50, 0, Math.PI, true);
context.closePath()
context.fill();

// bas
context.beginPath();
context.arc(150, 215, 50, 0, Math.PI, false);
context.closePath()
context.fill();

// gauche
context.beginPath();
context.arc(85, 150, 50, 90*(Math.PI/180), 270*(Math.PI/180), false);
context.closePath()
context.fill();

// droite
context.beginPath();
context.arc(215, 150, 50, 270*(Math.PI/180), 90*(Math.PI/180), false);
context.closePath()
context.fill();

Il ne reste que des quarts de cercles à mettre à chaque coin. Comme nous savons déjà comment dessiner des demi-cercles, on fera de même pour faire les quartiers en ajustant les angles.

En tentant de faire le premier quart, c'est possible que vous n'arriviez pas du premier coup au résultat attendu :



C'est qu'il ne faut pas oublier de relier le centre en appliquant le point de départ de l'arc avec la méthode lineTo() pour dessiner toute la surface.

// haut gauche
context.beginPath();
context.lineTo(85, 85); // ligne importante pour créer un quart de cercle
context.arc(85, 85, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.closePath()
context.fill();

// haut droit
context.beginPath();
context.lineTo(215, 85);
context.arc(215, 85, 50, 270*(Math.PI/180), 0, false);
context.closePath()
context.fill();

// bas gauche
context.beginPath();
context.lineTo(85, 215);
context.arc(85, 215, 50, 90*(Math.PI/180), 180*(Math.PI/180), false);
context.closePath()
context.fill();

// bas droite
context.beginPath();
context.lineTo(215, 215);
context.arc(215, 215, 50, 0, 90*(Math.PI/180), false);
context.closePath()
context.fill();

Voilà, le pattern du logo est complété.



Mais une minute! Ça veut dire qu'on aurait pu dessiner les arcs de la première étape en omettant d'appeler la méthode lineTo()! Oui, tout à fait, mais vous auriez eu à calculer à tâton les angles exacts. En maintenant vous connaissez deux façons de faire. Le code alternatif pour dessiner l'arc du haut sans effacer de zone ressemblerait à ceci :

context.beginPath();
context.arc(150, 50, 50, 210*(Math.PI/180), 330*(Math.PI/180), false);
context.closePath()
context.fill();

Maintenant que vous êtes à l'aise à manipuler cercles, angles et arcs, libre à vous de reproduire le logo de la SRC dans l'ordre qui vous plait.