Tout comme n`importe quel programme de dessin normal, nous pouvons remplir et tracer des formes en utilisant des gradients linéaires et radiaux. Nous créons un objet CanvasGradient à l`aide de l`une des méthodes suivantes. Nous pouvons ensuite assigner cet objet aux propriétés fillStyle ou strokeStyle. Nous utilisons cette méthode pour créer un objet CanvasPattern qui est très similaire aux méthodes de dégradé que nous avons vues ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l`assigner aux propriétés fillStyle ou strokeStyle. Par exemple: dans ce deuxième exemple, nous faisons quelque chose de semblable à celui ci-dessus, mais au lieu de dessiner des cercles les uns sur les autres, j`ai dessiné de petits rectangles avec une opacité croissante. L`utilisation de RGBA () vous donne un peu plus de contrôle et de flexibilité car nous pouvons définir le style de remplissage et de contour individuellement. removeElements () supprimera tous les éléments créés par P5, à l`exception des éléments Canvas/Graphics créés par createCanvas ou createGraphics. Tous les gestionnaires d`événements seront supprimés de ces éléments, et l`élément est supprimé de la page.

Dans le chapitre sur les formes de dessin, nous avons utilisé uniquement les styles de ligne et de remplissage par défaut. Ici nous explorerons les options de canevas que nous avons à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter différentes couleurs, styles de ligne, dégradés, motifs et ombres à vos dessins. Notez également que seuls les points de terminaison de début et de fin d`un chemin d`accès sont affectés: si un chemin d`accès est fermé avec closePath (), il n`y a pas de point de terminaison de début et final; au lieu de cela, tous les points de terminaison du chemin d`accès sont connectés à leur segment précédent et suivant en utilisant le paramètre actuel du style lineJoin, dont la valeur par défaut est onglet, avec l`effet d`étendre automatiquement les bordures extérieures des segments connectés à leur point d`intersection, de sorte que le contour de rendu couvre exactement les pixels complets centrés sur chaque point de terminaison si ces segments connectés sont horizontaux et/ou verticaux). Voir les deux sections suivantes pour les démonstrations de ces styles de ligne supplémentaires. Comme vous l`avez vu, createCanvas crée un Canvas HTML5, un élément spécial dans lequel vous pouvez dessiner des graphiques. Toutefois, à l`aide de la bibliothèque de compléments P5. DOM, P5. js peut également être utilisé pour créer et interagir avec des éléments HTML en dehors du canevas graphique. Ce didacticiel vous expliquera comment utiliser P5.

DOM. Il y a plusieurs propriétés qui nous permettent de coiffer des lignes. Dans le fichier CSS, vous ajoutez ce qu`on appelle des «règles», ou des lignes qui déterminent la façon dont les différents éléments sont présentés. Vous pouvez définir ces règles en fonction de la balise HTML (p, div, span, etc.), d`une classe d`éléments (préfacée par «.») ou d`un ID d`élément (préfacé par «#»). L`exemple ci-dessous restitue la même chose que l`exemple précédent, mais utilise une feuille de style CSS au lieu de la méthode. style(). Notez que dans ce cas, aucune citation n`est placée autour des noms de propriété ou des valeurs. En plus de createCanvas (w, h), il existe un certain nombre d`autres méthodes telles que createDiv (), createP (), createA (), etc (voir la référence pour la liste complète). Dans l`exemple ci-dessous, un div avec du texte est créé, en plus du canevas graphique, et la position est définie pour chaque. Peut-être que vous ne vous souciez pas de ce conteneur div vos éléments finissent dans, mais veulent juste définir leur position sur la page.

Dans ce cas, vous pouvez utiliser. position (x, y). L`appel de cette méthode substitue le positionnement par défaut de l`élément (en appliquant une position de style CSS: Absolute), ce qui vous permet de lui donner une position par rapport à la partie supérieure gauche de la fenêtre (0,0). L`exemple ci-dessous crée un en plus de dessiner des formes opaques sur le canevas, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Pour ce faire, vous pouvez définir la propriété globalAlpha ou attribuer une couleur semi-transparente au style de contour et/ou de remplissage. Chaque élément Insights Canvas possède un nom de classe unique que vous pouvez référencer dans CSS personnalisé. Vous pouvez également ajouter votre propre nom de classe à chaque élément. Pour ajouter un nom de classe personnalisé ou obtenir le nom de classe par défaut, modifiez l`élément et cliquez sur l`onglet disposition et options. Sous nom de classe, vous pouvez spécifier votre propre classe ou utiliser le sélecteur fourni sous ce champ.