Dégradés Canvas
Un dégradé, en général, est un motif de couleurs qui passe d'une couleur à une autre. Les dégradés du Canvas HTML5 sont des motifs de couleurs utilisés pour remplir des cercles, des rectangles, des lignes, du texte, etc., et les formes du canvas ne se limitent pas aux couleurs unies.
Il existe deux types de dégradés :
- createLinearGradient(x,y,x1,y1) - pour créer un dégradé linéaire
- createRadialGradient(x,y,r,x1,y1,r1) - pour créer un dégradé radial
Une fois que vous avez un objet dégradé, ajoutez deux arrêts de couleur ou plus. Pour spécifier les arrêts de couleur et leur position le long du dégradé, la méthode addColorStop() est utilisée. Les positions du dégradé peuvent varier entre 0 et 1.
Ensuite, définissez la propriété fillStyle ou strokeStyle sur le dégradé et dessinez la forme.
Dégradé linéaire
Le dégradé linéaire modifie la couleur selon un motif linéaire définissant la direction du dégradé (horizontal, vertical ou diagonal). Les quatre paramètres de cette fonction (x,y,x1,y1) définissent la direction et l'étendue du dégradé. Remarque : les coordonnées du Canvas commencent à (0,0) dans le coin supérieur gauche, avec x augmentant vers la droite et y augmentant vers le bas.
Exemple de dégradé linéaire utilisant fillStyle :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "green");
grd.addColorStop(1, "whitesmoke");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 260, 110);
</script>
</body>
</html>Exemple de dégradé linéaire utilisant fillStyle avec différentes couleurs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #202131;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('exampleCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 500, 200);
var linear = context.createLinearGradient(0, 0, 500, 200);
linear.addColorStop(0, '#297979');
linear.addColorStop(1, '#2ee035');
context.fillStyle = linear;
context.fill();
</script>
</body>
</html>Exemple de dégradé linéaire utilisant fillStyle et strokeStyle :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 5px solid #cccccc;
}
</style>
<script>
function drawShape() {
var canvas = document.getElementById('canvasGradient');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
lgrad1.addColorStop(0, 'blue');
lgrad1.addColorStop(0.4, 'lightpink');
lgrad1.addColorStop(0.5, 'purple');
lgrad1.addColorStop(1, 'lightsalmon');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
lgrad2.addColorStop(0, '#7afff3');
lgrad2.addColorStop(0.5, '#191918');
lgrad2.addColorStop(1, '#7afff3');
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
ctx.fillRect(15, 15, 120, 120);
ctx.strokeRect(100, 50, 100, 50);
} else {
alert('Your browser does not support');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient" width="300" height="300"></canvas>
</body>
</html>Dégradé radial
Le dégradé radial modifie la couleur selon un motif circulaire. Il peut être créé avec deux cercles spécifiés. En d'autres termes, le dégradé radial est un motif de couleurs s'étendant circulairement, d'une couleur intérieure vers une ou plusieurs autres couleurs. Cela peut être réalisé avec deux cercles, chacun devant posséder un point central et un rayon.
Exemple de dégradé radial :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(155, 80, 20, 130, 40, 190);
grd.addColorStop(0, "#14389c");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(15, 15, 270, 120);
</script>
</body>
</html>Pratique
Parmi ces méthodes, lesquelles sont utilisées pour appliquer des couleurs, des motifs et des dégradés aux formes dessinées sur le canvas HTML5 ?