Parmi les styles les plus notables, on peut noter l’ajout d’effets de transparence et d’ombres aux différentes figures de nos canevas.
Gérer la transparence de nos dessins
Jusqu’à présent, nous n’avons dessiné que des figures opaques. On va cependant également pouvoir dessiner des figures semi-transparentes.
Il existe deux manières de faire cela : on peut soit directement passer une couleur semi-transparente en valeur des propriétés strokeStyle ou fillStyle en utilisant par exemple des notations RGBa, soit utiliser la propriété globalAlpha de l’interface CanvasRenderingContext2D.
La propriété globalAlpha va prendre une valeur comprise entre 0 (totalement transparent) et 1 (totalement opaque).
Généralement, on préférera utiliser passer une notation de couleur gérant la transparence à strokeStyle ou fillStyle car c’est la façon la plus simple de procéder. Il suffira donc d’écrire :
See the Pen
Cours JavaScript 15.5.1 by Pierre (@pierregiraud)
on CodePen.
Cependant, dans certaines situations et notamment lorsqu’on doit dessiner de nombreuses figures avec le même niveau de transparence, il peut être plus rapide de définir globalAlpha. Dans ce cas, on écrira :
See the Pen
Cours JavaScript 15.5.2 by Pierre (@pierregiraud)
on CodePen.
Ajouter des ombres à nos figures
On va également pouvoir ajouter des ombres à nos figures. Pour cela, nous allons devoir utiliser les propriétés shadowOffsetX, shadowOffsetY, shadowBlur et shadowColor de l’interface CanvasRenderingContext2D.
La propriété shadowOffsetX prend en valeur le décalage horizontal de l’ombre que l’on souhaite créer par rapport aux formes de notre canevas. Une valeur positive décalera l’ombre vers la droite tandis qu’une valeur négative la décalera vers la gauche.
La valeur par défaut est 0 ce qui signifie que l’ombre n’est pas décalée horizontalement (elle est centrée horizontalement par rapport à la forme et se situe derrière elle).
La propriété shadowOffsetY prend en valeur le décalage vertical de l’ombre que l’on souhaite créer par rapport aux formes de notre canevas. Une valeur positive décalera l’ombre vers le bas tandis qu’une valeur négative la décalera vers le haut.
La valeur par défaut est à nouveau 0 ce qui signifie que l’ombre n’est pas décalée verticalement (elle est centrée verticalement par rapport à la forme et se situe derrière elle).
La propriété shadowBlur permet de définir le flou Gaussien, c’est-à-dire la dispersion de l’ombre. La valeur par défaut est 0. Plus la valeur est grande, plus l’ombre sera étendue autour de la forme. Le flou Gaussien est créé en mélangeant la couleur de l’ombre et celle du fond ce qui signifie que plus l’ombre est éloignée de la forme, plus sa couleur se rapproche de celle du fond.
Finalement, la propriété shadowColor permet d’indiquer la couleur de l’ombre. Notez que si on définit une couleur semi transparente avec strokeStyle ou fillStyle, l’ombre créée héritera également de cette semi-transparence.
See the Pen
Cours JavaScript 15.5.3 by Pierre (@pierregiraud)
on CodePen.
