Méthode : CanvasGradient.addColorStop()

Ajoute une couleur dans la définition du gradient

Syntaxe
myGradient.addColorStop(Integer numero, String maCouleur)

Compatible tous navigateurs

Oui

Description
Ajoute un code couleur maCouleur dans la définition du gradient à l'indice numero.

Exemple 1 : Un gradient entre le rouge et le vert

Code source

<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

/* Création du gradient */
var gradient=myContext.createLinearGradient(50, 50, 250, 250);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(1, '#0f0');

/* Représentation du gradient sur l'ensemble du canvas */
myContext.fillStyle=gradient;
myContext.fillRect(0,0,300,300);
</script>

Résultat

Emulation de la console

Explication

Un gradient linéaire simple.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 22/09/2017