Degradados de Canvas
En general, un degradado es un patrón de colores que cambia de un color a otro. Los degradados de HTML5 Canvas son patrones de color utilizados para rellenar círculos, rectángulos, líneas, texto, etc., y las formas del canvas no se limitan a colores sólidos.
Existen dos tipos de degradados:
- createLinearGradient(x,y,x1,y1) - para crear un degradado lineal
- createRadialGradient(x,y,r,x1,y1,r1) - para crear un degradado radial
Una vez que tengas un objeto de degradado, agrega dos o más paradas de color. Para especificar las paradas de color y su posición a lo largo del degradado, se utiliza el método addColorStop(). Las posiciones del degradado pueden estar en un rango entre 0 y 1.
Luego, establece la propiedad fillStyle o strokeStyle en el degradado y dibuja la forma.
Degradado Lineal
El degradado lineal cambia el color en un patrón lineal que define la dirección del degradado (horizontal, vertical o diagonal). Los cuatro parámetros de esta función (x,y,x1,y1) definen la dirección y la extensión del degradado. Nota: Las coordenadas del canvas comienzan en (0,0) en la esquina superior izquierda, con x aumentando hacia la derecha y y aumentando hacia abajo.
Ejemplo de un degradado lineal usando 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>Ejemplo de un degradado lineal usando fillStyle con diferentes colores:
<!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>Ejemplo de un degradado lineal usando fillStyle y 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>Degradado Radial
El degradado radial cambia el color en un patrón circular. Se puede crear con dos círculos especificados. En otras palabras, el degradado radial es un patrón de color que se extiende circularmente, desde un color interior hacia uno o más colores adicionales. Esto se puede lograr con dos círculos, cada uno de los cuales debe tener un punto central y un radio.
Ejemplo de un degradado 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>Práctica
¿Cuáles de estos métodos se utilizan para aplicar colores, patrones y degradados a las formas dibujadas en el canvas de HTML5?