Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
CanvasRenderingContext2D.createLinearGradient()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthodeCanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.
Cette méthode retourne unCanvasGradient linéaire.
NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".
Syntaxe
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);Paramètres
Valeur retournée
CanvasGradientUn
CanvasGradient linéaireinitialisé avec la ligne spécifiée.
Exemples
Utilisation de la méthodecreateLinearGradient
Ceci est seulement un simple fragment de code qui utilise la méthodecreateLinearGradient pour créer unCanvasGradient avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthodeCanvasGradient.addColorStop() pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez commefillStyle courant, et il est dessiné sur le canevas lors de l'utilisation de la méthodefillRect(), par exemple.
HTML
<canvas></canvas>JavaScript
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, "green");gradient.addColorStop(1, "white");ctx.fillStyle = gradient;ctx.fillRect(10, 10, 200, 100);Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :
Code jouable
<canvas width="400" height="200"></canvas><div> <input type="button" value="Edit" /> <input type="button" value="Reset" /></div><textarea>var gradient = ctx.createLinearGradient(0,0,200,0);gradient.addColorStop(0,"green");gradient.addColorStop(1,"white");ctx.fillStyle = gradient;ctx.fillRect(10,10,200,100);</textarea>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var textarea = document.getElementById("code");var reset = document.getElementById("reset");var edit = document.getElementById("edit");var code = textarea.value;function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value);}reset.addEventListener("click", function () { textarea.value = code; drawCanvas();});edit.addEventListener("click", function () { textarea.focus();});textarea.addEventListener("input", drawCanvas);window.addEventListener("load", drawCanvas);Spécifications
| Specification |
|---|
| HTML # dom-context-2d-createlineargradient-dev |
Compatibilité des navigateurs
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D CanvasRenderingContext2D.createRadialGradient()