El método HTML Canvas createLinearGradient() se utiliza para crear un objeto de degradado lineal.
El degradado se puede usar para rellenar diferentes colores en rectángulos, círculos, líneas, texto, etc. Luego podemos asignar el color del degradado a las propiedades strokeStyle o fillStyle para rellenar o dibujar formas como rectángulos, círculos, líneas, texto, etc.
El método addColorStop() agrega los diferentes colores y coloca los colores en el objeto degradado.
Sintaxis: :
context.createLinearGradient(x0, y0, x1, y1);
Parámetros: :
- x0: este parámetro indica la coordenada x del punto de inicio del gradiente.
- y0: este parámetro indica la coordenada y del punto de inicio del gradiente.
- x1: este parámetro indica la coordenada x del punto final del gradiente.
- y1: este parámetro indica la coordenada y del punto final del gradiente.
Ejemplo 1 :
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas
createLinearGradient() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML canvas
createLinearGradient() Method
</h2>
<canvas id="myCanvas"
width="350"
height="180">
</canvas>
<script>
var a = document.getElementById(
"myCanvas");
var gctx = a.getContext("2d");
var clg =
gctx.createLinearGradient(
100, 150, 200, 120);
clg.addColorStop(0, "yellow");
clg.addColorStop(1, "pink");
gctx.fillStyle = clg;
gctx.fillRect(80, 20, 200, 110);
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML canvas createLinearGradient() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML canvas
createLinearGradient() Method
</h2>
<canvas id="mycanvas"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00AB3B');
lingrad.addColorStop(0.5, '#45ec3f');
lingrad.addColorStop(0.5, '#66CC20');
lingrad.addColorStop(1, '#f3f');
ctx.fillStyle = lingrad;
// draw shape
ctx.fillRect(10, 10, 130, 130);
</script>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método canvas createLinearGradient() se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA