Introduction▲
Arc-en-ciel est un outil pour faire des dessins sur l'élément canvas avec sa souris. Il permet de dessiner des rectangles, des cercles, des arcs, des polygones, des lignes, des courbes de Bézier quadrique et cubique et d'insérer du texte. Il est ensuite possible de modifier, déplacer, copier, effacer, colorer, dupliquer les formes et de générer le code JavaScript du canvas.
Cet outil peut aussi changer la couleur des balises d'une page web et de leur texte.
I. Téléchargement▲
Vous trouverez ici un lien pour télécharger l'outil Arc-en-ciel. Pour pouvoir vous en servir, utilisez la fonction shapes.canvasInit() ;. Elle s'emploie avec deux paramètres facultatifs. Le premier pour indiquer l'id de votre canvas et le second pour obtenir une bordure, il faut donc renseigner le nombre de pixels voulus.
Exemple :
shapes.canvasInit('canvas', 1) ;shapes.canvasInit pour lancer la fonction.
canvas pour l'id de votre canvas.
1 pour avoir un cadre noir d'un pixel.
II. Colorer les balises ou le texte▲
Une des fonctions d'Arc-en-ciel est de pouvoir colorer les balises HTML. Il faut cliquer sur un de ces éléments pour le sélectionner, ensuite on peut changer la couleur de son fond ou de son texte avec la fonction Couleur en déplaçant sa souris.
Cette fonction nous servira également pour colorer les formes de notre canvas.
II-A. Utilisation▲
Faites un clic droit sur une balise de votre page par exemple le titre ou une div pour le sélectionner.
Le menu contextuel d'Arc-en-ciel s'affiche :
Cliquez sur 
pour verrouiller l'élément et pour activer la fonction Couleur.
En déplaçant votre souris, vous devez voir l'élément ciblé changer de couleur comme sur l'image d'illustration ci-dessous (un élément div) :
La couleur obtenue peut ne pas être la même.
La fonction Couleur sert à sélectionner une couleur par rapport à la position de la souris sur l'écran. Il représente alors une palette et chaque position du curseur une couleur.
Faites à nouveau un clic droit où vous voulez, placez-vous sur 
pour faire apparaître le sous-menu des couleurs :
Faites un clic gauche sur 
.
Pour le : représentation de la palette (écran).
En plaçant la souris au milieu de l'écran on obtient du jaune, en la déplaçant vers la gauche la nuance vire au rouge. Et inversement en la déplaçant vers la droite la nuance vire au vert.
Même principe pour les couleurs suivantes : clic droit, Couleur et sélectionnez-en une.
Pour le 
: gauche = jaune, milieu = vert, droite = cyan. 
Pour le 
: gauche = vert, milieu = cyan, droite = bleu. 
Pour le 
: gauche = cyan, milieu = bleu, droite = magenta. 
Pour le 
: gauche = bleu, milieu = magenta, droite = rouge. 
Pour le 
: gauche = magenta, milieu = rouge, droite = jaune. 
Pour 
: toute la palette chromatique est représentée. 
Pour les nuances claires et foncées de chaque couleur bougez la souris verticalement, le haut de l'écran représentant le noir et le bas le blanc.
Pour le 
: haut = noir et bas = blanc.
Pour rétablir la valeur par défaut (blanc), clic droit, Couleur 
. Pour relancer la fonction cliquez sur une couleur.
Quand une couleur est sélectionnée, elle apparaît entre parenthèses à côté de Couleur dans le menu contextuel.
Une fois que la couleur de l'élément est à votre convenance, faites un clic droit pour afficher le menu contextuel et cliquez sur 
pour la conserver.
Pour en changer, cliquer sur 
.
En mode changer couleur : cliquez sur 
, cela stoppe le changement horizontal et la teinte sélectionnée ne peut alors changer que verticalement dans les tons clairs et foncés. Vous pouvez ainsi avoir toutes les nuances d'une couleur précise allant du noir au blanc. Pour réutiliser le changement de couleur horizontal cliquez sur 
.
Cette fonction est aussi activable en mode garder couleur.
Toujours en mode changer couleur : cliquez sur 
, cela stoppe le changement vertical. La couleur sélectionnée ne peut alors changer qu'horizontalement. Vous pouvez ainsi avoir toutes les couleurs d'un ton précis. Pour réactiver les nuances claires et foncées cliquez sur 
.
Également activable en mode garder couleur.
Pour modifier la couleur du texte d'un élément, cliquez sur 
du menu contextuel, pour modifier l'arrière-plan, cliquez sur 
.
Pour ne plus cibler l'élément sélectionné, cliquez sur 
. Vous pourrez alors cibler un nouvel élément.
III. Dessiner sur l'élément canvas▲
Pour dessiner, Arc-en-ciel doit s'appuyer sur l'élément canvas.
Pour ce faire une fenêtre avec différentes options est utilisée. Elle est accessible par le menu contextuel.
III-A. Rectangles▲
Pour commencer, nous allons voir les rectangles. Avec les différents paramètres, nous pourrons dessiner toute leur surface ou seulement leur contour en ayant la possibilité de choisir son épaisseur et son type d'angle, soit normal, rond ou en biseau. Il sera ensuite possible de modifier leurs dimensions, les déplacer, changer leur couleur, les copier, les effacer et générer le code du canvas. Un affichage en pixels permettra de connaître leur position sur les axes X et Y ainsi que leur longueur et leur hauteur. Le tracé se fera avec la souris ou au clavier en utilisant les flèches gauche, droite, haut et bas, permettant une précision au pixel.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-A-1. Utilisation▲
Faites un clic droit, et cliquez sur « Dessiner » dans le menu contextuel :
Le menu Dessiner s'ouvre :
Sur la première ligne deux onglets sont présents. Pour l'instant seul l'onglet Dessiner nous intéresse. Ensuite viennent un bouton pour générer, deux flèches de navigation et un bouton pour fermer le menu.
Sur la deuxième ligne, un menu déroulant contenant les différentes formes :
Pour dessiner un rectangle, cliquez sur le bouton 
, vous devrez cliquer sur OK à chaque fois que vous voulez faire un nouveau rectangle. Positionnez la souris sur le canvas, 
et 
apparaissent dans le menu Dessiner. Ils représentent en pixels la position de votre souris par rapport au coin supérieur gauche du canvas, X pour l'horizontal et Y pour la vertical. Déplacez-la à l'endroit où vous voulez placer le coin supérieur gauche du rectangle. Faites un clic gauche pour le fixer, 
et 
apparaissent. Ils représentent en pixels ces deux valeurs. Bougez votre souris, elle déplacera alors le coin inférieur droit du rectangle. Tracez les dimensions que vous souhaitez. Faites un clic gauche pour fixer le coin inférieur droit, et disparaissent. Votre rectangle est terminé.
Sur la troisième ligne du menu Dessiner, deux boutons radio sont présents. Surface pour des rectangles pleins comme vous venez de faire et Contour pour ne tracer que le périmètre du rectangle. Sélectionnez l'option 
. Le champ 
apparaît, il correspond à la largeur en pixels du contour de la forme, par défaut la valeur est 1. Le paramètre 
s'affiche également, il permet de choisir le type d'angle, soit normal, rond ou carré.
Procédez comme pour le rectangle plein pour dessiner les contours d'un rectangle : cliquez sur 
, positionnez la souris sur le canvas, clic gauche pour commencer, tracez en déplaçant la souris, clic gauche pour terminer.
Vous pouvez changer la valeur de l'épaisseur pour avoir une bordure plus ou moins grosse et changer le style de l'angle, celui-ci sera plus visible avec une certaine épaisseur, par exemple 10 pixels. À chaque nouvelle forme pensez à cliquer sur OK.
Pour les boutons en bas du menu :
Cliquez sur 
pour effacer tout le contenu du canvas.
Hormis le bouton Effacer, les actions des boutons en bas du menu dessiner ne s'appliquent qu'à la dernière forme effectuée.
Il est possible de modifier un rectangle, pour cela cliquez sur le bouton 
, positionnez la souris sur le canvas et faites un clic gauche, et s'affichent. Déplacez-la pour changer l'emplacement du coin supérieur gauche du rectangle. Cliquez de nouveau pour fixer le coin supérieur gauche, et s'affichent. Vous pouvez changer l'emplacement du coin inférieur droit en déplaçant votre souris. Enfin cliquez ou appuyez sur la touche Echap pour fixer le coin inférieur droit et terminer la modification, et disparaissent.
Pour changer l'emplacement d'un rectangle cliquez sur le bouton 
, cliquez sur le canvas, et s'affichent. Déplacez-le avec la souris à l'endroit voulu, puis cliquez ou appuyez sur la touche Echap pour terminer. et disparaissent.
Pour colorer le rectangle, cliquez sur le bouton 
du menu Dessiner. Ceci a pour effet de lancer la fonction Couleur en mode Rainbow ou avec le mode de couleur choisi précédemment, comme au chapitre « Colorer les balises ou le texte ». Sélectionnez-en une comme vous avez appris à le faire en déplaçant votre souris. Les flèches gauche et droite du clavier permettent aussi de changer les nuances chromatiques horizontales et les flèches haut et bas permettent de changer les nuances claires et foncées verticales. L'affichage des couleurs apparaît sur le menu dessiner, il est de type RGB. Les différentes options du changement des couleurs sont toujours disponibles via le menu contextuel. La forme que vous venez de dessiner sera automatiquement sélectionnée, inutile de cibler l'élément. Si vous le faites, c'est tout le canvas qui sera sélectionné et donc c'est l'arrière-plan de votre dessin qui changera de couleur. Terminez la coloration en cliquant sur du menu contextuel ou en appuyant sur la touche Echap. Si vous voulez à nouveau la modifier, cliquez sur le bouton Couleur. N'oubliez pas de revenir en mode changer couleur.
Pour dupliquer le dernier rectangle, cliquez sur 
. La nouvelle forme sera affichée avec un décalage de 20 pixels vers la droite et vers le bas par rapport à l'original. Elle deviendra ensuite la dernière forme, donc celle où les modifications des boutons auront effet.
Si vous essayez d'effectuer un déplacement, c'est la copie qui se déplacera et non l'original.
Supprimez le dernier rectangle en cliquant sur 
. Si plusieurs formes sont présentes, c'est l'avant-dernière qui deviendra dernière, donc celle où les modifications des boutons auront effet et ainsi de suite jusqu'à ce que le canvas soit vide.
Le champ texte en bas à droite sert à sélectionner la forme sur laquelle l'action du bouton va faire effet. Pour cela vous devez entrer le numéro qui correspond à une certaine forme. Pour la première que vous avez dessinée le 1, pour la deuxième le 2, etc. Si le champ texte est vide, c'est sur la dernière forme dessinée que s'applique l'action.
Un des inconvénients avec ce système, c'est que lorsque vous effacez une forme, étant donné que vous les sélectionnez en fonction de leur ordre, la suppression de l'une, décale toutes les autres sauf si c'est la dernière.
Arc-en-ciel peut générer un code JavaScript correspondant au dessin réalisé. Cliquez sur le bouton 
pour ouvrir une fenêtre où sera affiché ce code.
Pour un rectangle bleu plein par exemple voici le résultat que vous pouvez obtenir :
//une fonction anonyme qui encapsule tout le code.
(function(){
//une fonction onload pour attendre le chargement du DOM.
window.onload = function()
{
//Récupération de l'élément canvas dans une variable.
var canvas = document.getElementById("canvas");
//Vérification du canvas.
if(!canvas)
{
alert("Impossible de recuperer le canvas");
return;
}
//Récupération du contexte du canvas.
var context = canvas.getContext('2d');
//Vérification du contexte.
if(!context)
{
alert("Impossible de recuperer le context du canvas");
return;
}
//Couleur du rectangle plein : bleu.
context.fillStyle = "rgb(0,0,255)";
//Valeurs du rectangle : positions et dimensions.
context.fillRect(80,83,111,83);
};
})();III-B. Cercles▲
Nous allons maintenant dessiner des disques et des cercles. Les paramètres Surface, Contour et Épaisseur seront toujours présents. Les boutons seront les mêmes que pour les rectangles, Modifier, Déplacer, Couleur, Copier, Effacer et Générer. Les affichages des positions X et Y renseigneront toujours le positionnement sur le canvas et la nouvelle valeur rayon sera aussi en pixels. Le tracé des formes pourra encore se faire grâce aux flèches du clavier.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-B-1. Utilisation▲
Ouvrez le menu Dessiner en cliquant sur 
dans le menu contextuel.
Sélectionnez la 
.
Pour faire un disque, cliquez sur le bouton . Positionnez la souris sur le canvas, et apparaissent. Placez-vous à l'endroit où vous voulez mettre le centre de votre disque. Faites un clic gauche pour le fixer, 
s'affiche. Bougez horizontalement votre souris, elle déplacera alors le bord du disque et représentera son rayon par rapport au premier clic. Tracez les dimensions que vous souhaitez. Faites un clic gauche pour fixer le bord du disque, l'affichage disparaît, le disque est terminé.
Passons au cercle en sélectionnant 
.
Le champ épaisseur a toujours la même fonction.
Procédez comme pour le disque pour dessiner un cercle : clic sur , positionnez la souris sur le canvas, clic gauche pour commencer, tracer le cercle, clic gauche pour finir.
Les boutons en bas du menu fonctionnent tous comme pour les rectangles sauf pour Modifier.
Pour changer le rayon d'un disque ou d'un cercle, cliquez sur le bouton , positionnez la souris sur le canvas et faites un clic gauche, s'affiche. Déplacez-la horizontalement, pour agrandir ou diminuer la longueur du rayon. Faites un clic gauche ou appuyez sur la touche Echap pour fixer le bord du disque, disparaît, c'est terminé.
III-C. Arcs▲
Les arcs représentent une portion d'un cercle, nous allons donc procéder comme au chapitre précédent en dessinant celui-ci. Ensuite il va falloir choisir une partie de ce cercle en indiquant le point où il commencera et celui où il se terminera sur le périmètre. Les paramètres Surface et Ouvert permettront d'avoir un arc plein ou ouvert et le paramètre Extrémité nous donnera la possibilité de choisir comment se termine l'arc, soit normal, rond ou carré. Les affichages des positions X, Y et rayon indiqueront toujours les mêmes valeurs en pixels et les affichages premier radian, deuxième radian et angle nous permettront de connaître ces données. Le premier radian correspondant au premier point de l'arc et le deuxième radian au second point de l'arc, l'angle sera en degré allant de 0 à 360. L'utilisation des boutons sera la même que pour les autres formes hormis pour modifier. Et les flèches du clavier seront encore actives pour plus de précision.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-C-1. Utilisation▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la 
du menu déroulant.
Cliquez sur . Positionnez votre souris sur le canvas, et apparaissent. Placez-la à l'endroit où vous voulez mettre le centre de votre arc, faites un clic gauche pour le fixer, apparaît. Déplacez horizontalement votre souris, pour tracer le disque qui deviendra votre arc. Faites un clic gauche pour fixer le bord du disque, 
et 
s'affichent. Vous pouvez alors déplacer le premier point de votre arc en déplaçant horizontalement votre souris. Faites un nouveau clic gauche pour fixer le premier point, 
et s'affichent. Vous pouvez ainsi déplacer le deuxième point de votre arc en déplaçant horizontalement votre souris. Faites un dernier clic gauche pour fixer le deuxième point et finir, et disparaissent.
Pour faire un arc de cercle. Sélectionnez 
.
En plus de l'
, le réglage 
apparaît. Nous le verrons après.
Cliquez sur , positionnez la souris sur le canvas, clic gauche pour commencer, tracez le cercle, clic gauche pour fixer le rayon. Placement du premier point, clic gauche pour le fixer, placement du deuxième point, clic gauche pour le fixer et terminer.
L'affichage des différentes valeurs apparaît toujours suivant les actions réalisées.
Les boutons radio Extrémité permettent de régler les extrémités de l'arc. Leur type est normal, rond ou carré. Pour vous rendre compte du rendu, le mieux est encore d'essayer. Pour cela entrez une 
et tracez un arc de cercle 
, un autre 
et un dernier 
. Vous pourrez alors voir les changements.
Quand vous générez le code d'un arc de cercle rouge d'épaisseur 10 pixels avec extrémité ronde, vous obtenez ce résultat :
//Fonction anonyme et onload, récupération du canvas et du contexte.
// ...
//Extrémités rondes.
context.lineCap = "round";
//Début de la forme.
context.beginPath();
//Valeur de l'arc : position, rayon, début et fin.
context.arc(106,106,49,1.5707963267948966,6.283185307179586);
//Épaisseur du trait.
context.lineWidth = 10;
//Couleur de l'arc.
context.strokeStyle = "rgb(255,0,0)";
//Style de la forme : contour.
context.stroke();Pour les boutons en bas du menu, leur utilisation est la même que pour les autres formes. Seule la fonction Modifier change.
Pour la rectification des arcs, cliquez sur le bouton . Faites un premier clic pour pouvoir changer le rayon en déplaçant horizontalement la souris, un second pour déplacer le premier point de l'arc, un troisième pour le deuxième point de l'arc et un quatrième pour terminer.
III-D. Lignes▲
Pour les lignes, nous pourrons choisir leur nombre grâce au nouveau paramètre Nbr lignes ce qui nous permettra d'en tracer plusieurs à la suite. Il sera également possible de choisir le type d'angle et d'extrémité. Les modifications habituelles sont toujours possibles, le menu Dessiner affichera les valeurs en pixels de chaque point pour les différentes actions et les flèches pourront aussi être utilisées.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-D-1. Utilisation▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la 
du menu déroulant.
Les paramètres Nbrlignes, Épaisseur, Angle et Extrémité apparaissent.
Cliquez sur , positionnez la souris sur le canvas et faites un clic gauche pour fixer le point de départ de votre ligne. Déplacez la souris pour la tracer, et faites un clic gauche pour fixer le point où elle se termine.
Pour dessiner plusieurs lignes à la suite, indiquez leur nombre dans le champ prévu à cet effet. Reproduisez la procédure ci-dessus et faites un clic pour chaque nouvelle ligne tracée.
Vous pouvez déterminer l'épaisseur de votre trait, le type d'extrémité et d'angle comme vous l'avez déjà fait auparavant.
Vous remarquerez quand vous tracez un trait avec une extrémité ronde ou carrée, que la position du curseur n'est pas sur le bord de la ligne, contrairement au mode normal une partie proportionnelle à l'épaisseur dépasse.
Pour modifier trois lignes de suite, cliquez sur , positionnez votre souris sur le canvas et faites un clic gauche, puis déplacez le premier point. Faites un clic gauche pour le fixer et pouvoir déplacer le deuxième point. Cliquez pour le fixer puis déplacez le troisième point. Un autre clic pour le fixer et pouvoir déplacer le quatrième. Un dernier clic pour achever la modification.
III-E. Polygones▲
Les polygones s'effectuent sur la même base que les lignes. Nous allons pouvoir les faire en surface, ou contour avec épaisseur et angle réglable. Nous pourrons choisir combien de côtés comportera la figure avec le paramètre Nbr lignes. Il y aura toujours les différentes modifications, l'affichage en pixels et les flèches seront aussi utilisables.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-E-1. Utilisation▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la 
du menu déroulant.
Nous pouvons voir le paramètre Nbr lignes qui nous permet de choisir le nombre de côtés du polygone. Par défaut sa valeur est à 3.
Cliquez sur et positionnez la souris sur le canvas à l'endroit où vous voulez que commence votre forme. Faites un clic pour fixer le point de départ du premier côté et pouvoir le tracer. En bougeant la souris une ligne se dessine. Faites un clic pour fixer le deuxième point du premier côté. Vous pouvez alors placer le dernier point formant le triangle. Terminez avec un clic.
Pour une figure ayant plus de trois côtés, saisissez leur nombre dans le champ Nbr Lignes et reproduisez la procédure ci-dessus en faisant un clic pour chaque point.
Il est possible de tracer les polygones en ne dessinant que le contour. Cela offre la possibilité de sélectionner le type d'angle. Vous pouvez essayer de dessiner trois triangles d'épaisseur 10 avec différents genres d'angles pour voir le rendu. La procédure est exactement la même que pour les polygones pleins.
Quand vous générez le code d'un triangle vert d'épaisseur 10 pixels avec angles biseautés, vous obtenez ce résultat :
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Angles biseautés.
context.lineJoin = "bevel";
//Début de la forme.
context.beginPath();
//Placement du point de départ.
context.moveTo(125,68);
//Placement du deuxième point.
context.lineTo(60,163);
//Placement du troisième point.
context.lineTo(136,150);
//Fin de la forme
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "rgb(0,255,0)";
context.stroke();Seule l'utilisation du bouton Modifier en bas du menu diffère des autres formes. Pour effectuer un changement sur un triangle, cliquez sur , placez-vous sur le canvas et faites un clic gauche. Vous pouvez alors déplacer le premier angle. Faites un deuxième clic pour fixer le premier sommet et pour pouvoir déplacer le deuxième angle, un troisième clic pour fixer le deuxième sommet et déplacer le troisième angle. Finalisez par un dernier clic.
III-F. Courbes▲
Le canvas utilise les courbes de Bézier. Elles sont de deux types, les quadriques composées de trois points et les cubiques composées de quatre. Pour les dessiner, le principe de base est le même que pour les lignes, nous allons donc placer deux points comme nous avons déjà fait pour tracer un trait et ensuite pour la quadrique nous en placerons un troisième pour la courbe tandis que pour la cubique nous en placerons un troisième et un quatrième. Nous pourrons dessiner les courbes en mode Surface, Contour, Ouvert et les paramètres Extrémité et Angle nous permettront de les agrémenter. Nous pourrons en faire plusieurs à la suite, grâce au paramètre Nbr lignes. Les modifications sont toujours les mêmes, les affichages de valeurs en pixels aussi et les flèches aident toujours à être précis.
Illustration d'une courbe quadrique que nous allons chercher à obtenir :
… puis d'une courbe cubique :
III-F-1. Utilisation d'une courbe quadrique▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la 
du menu déroulant.
Les paramètres Nbr lignes, Surface, Contour et Ouvert apparaissent.
En choisissant le mode Contour les paramètres Épaisseur et Angle s'affichent. Et si vous sélectionnez le mode Ouvert le paramètre Extrémité les rejoint :
Mais pour l'instant nous allons rester en mode Surface.
Cliquez sur , positionnez la souris sur le canvas et faites un clic gauche pour fixer le point de départ de votre ligne. Déplacez la souris pour la tracer, clic gauche pour fixer le point où elle se termine, puis déplacez votre souris pour placer le troisième point, celui qui dessine la courbe. Faites un dernier clic pour finir. Vous pouvez voir qu'une ligne droite s'est tracée entre les deux points de la courbe.
Quand vous générez le code d'une courbe quadrique cyan pleine, vous obtenez ce résultat.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Début de la forme.
context.beginPath();
//Placement du premier point.
context.moveTo(75,93);
//Placement du second point et du troisième pour la courbe.
context.quadraticCurveTo(115,151,173,68);
context.fillStyle = "rgb(0,255,255)";
//Style de la forme plein.
context.fill();Passez en mode 
, cela facilitera la compréhension des instructions qui vont suivre.
Pour faire deux courbes de suite, entrez 
, cliquez sur , positionnez la souris sur le canvas et faites un clic gauche pour fixer le premier point. Tracez la ligne, cliquez pour fixer le deuxième point. Placez le troisième, celui de la courbe, cliquez pour le fixer. Tracez la deuxième ligne, cliquez pour fixer le quatrième point. Placez le cinquième celui de la seconde courbe et faites un dernier clic pour finir.
Si vous reproduisez les instructions ci-dessus en mode Surface ou Contour, vous remarquerez là aussi qu'une ligne droite s'est tracée entre les extrémités des deux lignes.
Les paramètres s'utilisent comme avec les autres formes et ont le même effet.
Pour modifier une courbe quadrique, cliquez sur , positionnez la souris sur le canvas, faites un clic gauche, puis déplacez le premier point. Cliquez pour le fixer puis déplacez le deuxième point. Cliquez pour le fixer puis déplacez le troisième point celui de la courbe. Un dernier clic pour terminer. Si plusieurs courbes se suivent, répétez la même opération pour chacune.
III-F-2. Utilisation d'une courbe cubique▲
Sélectionnez la 
du menu déroulant.
Les paramètres restent les mêmes.
Cliquez sur . Positionnez la souris sur le canvas et faites un clic gauche pour fixer le point de départ de votre ligne. Déplacez la souris pour la tracer, faites un clic gauche pour fixer le point où elle se termine, puis déplacez votre souris pour placer le troisième point, le premier de la courbe. Cliquez pour le fixer, puis déplacez votre souris pour placer le quatrième point, le second de la courbe. Faites un dernier clic pour finir.
Pour dessiner plusieurs courbes à la suite, il suffit de renseigner le nombre de lignes et de répéter la même action pour chaque courbe. Une ligne droite se tracera là aussi automatiquement entre le premier point de la première ligne et le dernier point de la dernière si vous êtes en mode Surface ou Contour.
Quand vous générez le code de deux courbes cubiques magenta à la suite d'épaisseur 1 en mode ouvert vous obtenez ce résultat :
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Début de la forme.
context.beginPath();
//Placement du premier point.
context.moveTo(38,79);
//Placement du deuxième point, du troisième et du quatrième pour la première courbe.
context.bezierCurveTo(25,114,113,178,138,78);
//Placement du cinquième point, du sixième et du septième pour la seconde courbe.
context.bezierCurveTo(146,29,254,31,227,79);
context.strokeStyle = "rgb(255,0,255)";
context.stroke();Pour modifier une courbe cubique, cliquez sur , positionnez la souris sur le canvas, faites un clic gauche, déplacez le premier point. Cliquez pour le fixer, déplacez le deuxième point. Cliquez pour le fixer puis déplacez le troisième point, le premier de la courbe. Cliquez pour le fixer, déplacez le quatrième point, le deuxième de la courbe. Faites un dernier clic pour terminer. Répéter l'opération pour chaque courbe.
III-G. Lignes mixtes▲
Lorsque vous tracez un trait pour faire une ligne, une courbe ou un polygone, vous pouvez faire un clic droit, ce qui affiche le menu Ligne :
Il offre la possibilité de choisir une ligne, une courbe quadrique ou cubique. C'est-à-dire que si vous choisissez de tracer trois lignes à la suite, grâce à ce menu vous pouvez choisir de faire la première en quadrique, la deuxième en cubique et la troisième droite.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
III-G-1. Utilisation▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la .
Cliquez sur , positionnez la souris sur le canvas et faites un clic gauche pour fixer le premier point. Tracez votre trait, puis clic droit pour afficher le menu Ligne. Clic sur quadrique, le trait que vous tracerez ne sera plus une ligne, mais une courbe. La méthode pour la tracer sera la même que pour ce style de courbe. Faites un deuxième clic pour fixer le deuxième point de la ligne, puis déplacez votre souris pour former la courbe. Faites un dernier clic pour fixer le troisième point et finir.
Si vous avez sélectionné un nombre de lignes supérieur à 1, vous pouvez changer son type pour chaque trait. Vous aurez accès au menu Ligne juste après le clic qui fixe le premier point de chaque ligne, quand vous pouvez la tracer.
Sélectionnez la 
, et choisissez le mode , cliquez sur , placez le premier point, puis quand vous tracez la droite vous pouvez avec un clic droit afficher le menu. Cliquez sur cubique pour rester sur ce mode. Vous cliquez de nouveau pour placer le deuxième point, le menu n'est plus accessible. Vous tracez votre courbe, cliquez pour fixer le troisième point, le menu n'est toujours pas disponible. Et ce n'est que lorsque vous avez cliqué pour placer le quatrième point et que vous pouvez tracer le second trait, celui de la seconde courbe, que le menu redevient actif. Terminez suivant le mode que vous aurez choisi.
Quand vous générez le code de trois lignes mixtes jaunes, vous obtenez ce résultat.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Début de la forme.
context.beginPath();
//Placement du premier point.
context.moveTo(44,123);
//Une courbe quadrique.
context.quadraticCurveTo(47,50,128,77);
//Une courbe cubique.
context.bezierCurveTo(175,97,234,41,136,18);
//Un dernier point pour faire une ligne.
context.lineTo(153,68);
context.strokeStyle = "rgb(255,255,0)";
context.stroke();Quand vous sélectionnez une forme dans le menu déroulant, elle est la valeur par défaut. Si vous avez choisi de dessiner trois lignes, que vous en tracez une première et que vous changez en quadrique pour la deuxième, la troisième sera à nouveau une ligne droite si bien sûr vous n'avez pas de nouveau changé.
III-H. Texte▲
Nous allons voir comment écrire du texte sur le canvas. En sélectionnant un type et une taille de police et en positionnant le curseur à l'endroit voulu. Pour cela deux nouveaux paramètres, Police et Taille de la police pour choisir le style et la taille du texte. Nous pourrons écrire en mode surface ou contour, mais toutes les autres options ainsi que le bouton Modifier seront inactifs.
III-H-1. Utilisation▲
Ouvrez le menu en cliquant sur dans le menu contextuel.
Sélectionnez la 
du menu déroulant.
Les paramètres Police, Taille de la police, Surface et Contour apparaissent. Par défaut les valeurs sont Algerian et 30 pixels :
Cliquez sur , positionnez la souris sur le canvas et faites un clic gauche à l'endroit où vous voulez écrire. Un curseur apparaît, écrivez votre texte. Puis touche Entrée pour terminer. Le curseur disparaît.
Quand vous générez le code d'un texte, vous obtenez ce résultat :
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Taille et style de la police.
context.font = "30px Courier New";
//Texte et position du texte.
context.fillText("Hello World !",70,104);Les boutons en bas du menu fonctionnent exactement comme pour les formes. Seul le bouton Modifier est inactif.
IV. Duplication▲
L'onglet Dupliquer contient deux fonctions servant à dupliquer les formes, une en translation l'autre en rotation.
Image de l'onglet Dupliquer :
IV-A. Translation▲
La translation permet de dupliquer une forme sur un nombre de colonnes et lignes voulu en choisissant l'espacement entre chaque. Pour cela quatre paramètres, Colonnes, Lignes, Horizontal et Vertical.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
IV-A-1. Utilisation▲
Dessinez un carré de 50 pixels de côté sur la position X 50 et position Y 50.
Allez dans l'onglet Dupliquer et dans la section Translation saisissez :
3 dans le champ Colonnes ;
100 dans le champ Horizontal ;
2 dans le champ Lignes ;
150 dans le champ Vertical.
Et cliquez sur le bouton OK.
Six carrés sont maintenant présents, sur trois colonnes espacées de 100 pixels et deux lignes espacées de 150.
Si vous effectuez des modifications sur une forme dupliquée, celle-ci s'appliquera sur toutes les répliques.
IV-B. Rotation▲
La Rotation duplique les formes par rapport à un axe placé avec les paramètres X et Y, chaque forme est espacée avec celui de l'Angle et le nombre de répliques choisi avec celui du Nombre. La case à cocher Déplacer nous offre la possibilité de mouvoir toutes les formes ensemble ou séparément avec le décalage de l'angle.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
Une fois la duplication effectuée après avoir cliqué sur OK, une seconde duplication est possible. Elle copie le premier groupe de formes autour de l'axe de celui-ci avec un décalage obtenu avec les paramètres X et Y, espacé avec celui de l'Angle et répété avec celui du Nombre. La case à cocher Centre sert à choisir si le groupe de formes original s'affiche ou non.
Ci-dessous l'illustration de ce que nous allons chercher à obtenir :
IV-B-1. Utilisation de la première rotation▲
Dessinez un carré de 25 pixels de côté sur la position X 185 et position Y 150.
Allez dans l'onglet Dupliquer et dans la section Rotation saisissez :
185 dans le champ X ;
150 dans le champ Y ;
72 dans le champ Angle ;
5 dans le champ Nombre.
Laissez la case Déplacer cochée.
et cliquez sur le bouton OK.
cinq carrés espacé de 72° sur un axe placé à 185 pixels horizontalement et 150 verticalement sont maintenant présents, formant une étoile.
En déplaçant le groupe de formes après avoir cliqué sur le bouton Déplacer de l'onglet Dessiner, elles se déplacent toutes ensemble en gardant la même position les unes par rapport aux autres, car la case Déplacer a été cochée et si vous l'aviez décochée, chacune imprimerait le même mouvement, mais en fonction de sa position, c'est-à-dire avec le décalage de l'angle sur lequel elle est placée.
IV-B-2. Utilisation de la deuxième rotation▲
Pour la deuxième duplication, nous pouvons voir que la case à cocher Centre a remplacé celle de Déplacer.
La copie du premier groupe de formes s'effectue avec les mêmes champs. X et Y vont représenter l'espacement de la nouvelle duplication par rapport à l'axe de rotation de la dernière, l'ancien X et Y. Angle et Nombre auront toujours la même fonction.
Dans la section rotation saisissez :
50 dans le champ X ;
50 dans le champ Y ;
60 dans le champ Angle ;
6 dans le champ Nombre.
Laissez la case Centre cochée et cliquez sur le bouton OK.
On retrouve bien notre premier groupe de formes dupliqué six fois avec un décalage de 50 pixels vers la droite et vers le bas autour de notre axe de rotation, avec un espacement de 60°.
Si vous faites la même opération avec la case Centre décochée, le groupe original, celui au centre ne sera plus affiché.
La case à cocher Déplacer a toujours le même effet avec la deuxième duplication.
Vous pouvez utiliser les deux modes de duplication Translation et Rotation ensemble.
V. Animation▲
Exemple d'une petite animation réalisée sur les bases d'un code généré avec Arc-en-ciel en ayant dessiné le contour d'un rectangle.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Variable de positions et de dimensions du rectangle.
var posX = 100;
var longueur = 100;
var hauteur = 100;
//Drapeau pour l'incrémentation des variables.
var drapeau = true;
//Boucle de rendu.
var myInterval = setInterval(modification, 1000/60);
//Fonction de dessin du rectangle.
function modification() {
//Effacement du canvas.
context.clearRect(0, 0, canvas.width, canvas.height);
//dessin du rectangle avec les variables.
context.strokeStyle = "rgb(0,0,0)";
context.strokeRect(posX,150,longueur,hauteur);
//Incrémentation des variables pour donner l'illusion du mouvement.
if(posX < 200 && drapeau) {
posX++;
longueur--;
} else if(hauteur > -100 && drapeau) {
hauteur--;
} else if(posX > 100) {
drapeau = false;
posX--;
longueur++;
} else if(hauteur < 100) {
hauteur++;
} else
drapeau = true;
};Ici la même animation sur la base d'un rectangle dupliqué six fois en translation sur trois colonnes et deux lignes espacées de 50 pixels.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//Ici les mêmes variables.
var posX = 100;
var longueur = 100;
var hauteur = 100;
//Variable pour le décalage des rectangles.
var espaceLigne = 0;
var espaceColonne = 0;
//Là le code est le même.
var drapeau = true;
var myInterval = setInterval(modification, 1000/60);
function modification() {
context.clearRect(0, 0, canvas.width, canvas.height);
//Double boucle pour la duplication en translation.
for(var i = 0; i < 2; ++i)
{
for(var j = 0; j < 3; ++j)
{
context.strokeStyle = "rgb(0,0,0)";
//Dessin du rectangle avec les variables de position plus décalage.
context.strokeRect(posX+espaceColonne,150+espaceLigne,longueur,hauteur);
espaceColonne += 50;
}
espaceLigne += 50;
espaceColonne = 0;
}
//Ne pas oublier de revenir à zéro sinon tout se déplace.
espaceLigne = 0;
//Même code que sur la première animation.
if(posX < 200 && drapeau) {
posX++;
longueur--;
} else if(hauteur > -100 && drapeau) {
hauteur--;
} else if(posX > 100) {
drapeau = false;
posX--;
longueur++;
} else if(hauteur < 100) {
hauteur++;
} else
drapeau = true;
};Maintenant, la même animation sur la base d'un rectangle dupliqué cinq fois en rotation avec un angle de 72°.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//posX posY sont à 0, positionné sur l'axe de rotation.
var posX = 0;
var longueur = 100;
var hauteur = 100;
var drapeau = true;
var myInterval = setInterval(modification, 1000/60);
function modification() {
context.clearRect(0, 0, canvas.width, canvas.height);
//On sauvegarde la matrice.
context.save();
//On place notre axe de rotation.
context.translate(150,150);
//Boucles pour la duplication en rotation.
for(var k = 0; k < 5; ++k)
{
//On tourne la matrice de 72° par rapport à l'axe.
context.rotate((Math.PI / 180) * 72);
context.strokeStyle = "rgb(0,0,0)";
context.strokeRect(posX,0,longueur,hauteur);
}
//On restore la matrice originale.
context.restore();
//Seules les valeurs des conditions changent.
if(posX < 100 && drapeau) {
posX++;
longueur--;
} else if(hauteur > -100 && drapeau) {
hauteur--;
} else if(posX > 0) {
drapeau = false;
posX--;
longueur++;
} else if(hauteur < 100) {
hauteur++;
} else
drapeau = true;
};La même animation sur la base de la première duplication en rotation avec des rectangles réduits de moitié, dupliqués trois fois en rotation.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
//longueur et hauteur sont divisées par deux.
var posX = 0;
var posY = 0;
var longueur = 50;
var hauteur = 50;
var drapeau = true;
var myInterval = setInterval(modification, 1000/60);
//Fonction pour dessiner le groupe de 5 rectangles.
function rotation1(X,Y)
{
context.save();
context.translate(X,Y);
for(var k = 0; k < 5; ++k)
{
context.rotate((Math.PI / 180) * 72);
context.strokeStyle = "rgb(0,0,0)";
context.strokeRect(posX,posY,longueur,hauteur);
}
context.restore();
};
function modification() {
context.clearRect(0, 0, canvas.width, canvas.height);
//On sauvegarde la matrice pour répéter 3 fois les 5 rectangles.
context.save();
context.translate(160,160);
for(var l = 0; l < 3; ++l)
{
context.rotate((Math.PI / 180) * 120);
//Appel de la fonction avec 60 en paramètre, le décalage de la matrice.
rotation1(60,60);
}
context.restore();
//Les valeurs restent les mêmes.
if(posX < 50 && drapeau) {
posX++;
longueur--;
} else if(hauteur > -50 && drapeau) {
hauteur--;
} else if(posX > 0) {
drapeau = false;
posX--;
longueur++;
} else if(hauteur < 50) {
hauteur++;
} else
drapeau = true;
};La même animation regroupant toutes les duplications.
//Fonction anonyme et onload, récupération du canvas et du contexte.
// …
var posX = 0;
var posY = 0;
var longueur = 30;
var hauteur = 30;
var espaceLigne = 0;
var espaceColonne = 0;
var drapeau = true;
var myInterval = setInterval(modification, 1000/60);
//Fonction pour dessiner le groupe de 5 rectangles.
function rotation1(X,Y,colonne,ligne)
{
context.save();
context.translate(X+colonne,Y+ligne)
for(var k = 0; k < 5; ++k)
{
context.rotate((Math.PI / 180) * 72);
context.lineWidth = 1;
context.strokeStyle = "rgb(0,0,0)";
context.strokeRect(posX,posY,longueur,hauteur);
}
context.restore();
};
//Fonction pour dupliquer le groupe de 5 rectangles.
function tournerAutour1()
{
context.save();
context.translate(150+espaceColonne,150+espaceLigne);
for(var l = 0; l < 3; ++l)
{
context.rotate((Math.PI / 180) * 120);
rotation1(60,60,0,0);
}
context.restore();
};
//Fonction contenant une double boucle et les appels aux fonctions.
function modification() {
context.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < 2; ++i)
{
for(var j = 0; j < 2; ++j)
{
rotation1(150,150,espaceColonne,espaceLigne);
tournerAutour1();
espaceColonne += 250;
}
espaceLigne += 250;
espaceColonne = 0;
}
espaceLigne = 0;
if(posX < 30 && drapeau) {
posX++;
longueur--;
} else if(hauteur > -30 && drapeau) {
hauteur--;
} else if(posX > 0) {
drapeau = false;
posX--;
longueur++;
} else if(hauteur < 30) {
hauteur++;
} else
drapeau = true;
};VI. Remerciement▲
Je tiens à remercier Francis Walter, SylvainPV et Vermine pour l'aide qu'ils m'ont apportée ainsi que ClaudeLELOUP pour la relecture orthographique.