Manual de referencia HTML

大全 de etiquetas HTML

Método createLinearGradient() de HTML canvas

El método createLinearGradient() crea una transición de color lineal a lo largo de la línea de coordenadas especificada. Este método devuelve un objeto CanvasGradient lineal.

Manual de referencia de HTML canvas

Ejemplo en línea

Defina una transición del rojo al blanco (de izquierda a derecha) como estilo de relleno del rectángulo:

Demostración del uso del método createLinearGradient():

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método createLinearGradient() de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0, "rojo");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten el método createLinearGradient().

Nota:Internet Explorer 8 Las versiones anteriores de Internet Explorer no admiten el elemento <canvas>.

Definición y uso

El método createLinearGradient() crea un objeto de transición lineal.
La transición se puede usar para rellenar rectángulos, círculos, líneas, texto, etc.

Consejo:Utilice este objeto como strokeStyle o fillStyle el valor de la propiedad.

Consejo:Utilice addColorStop() El método especifica diferentes colores y la ubicación de los colores en el objeto gradient.

Sintaxis de JavaScript:	context.createLinearGradient(x0, y0, x1,y1);

Valores de los parámetros

Parámetros	Descripción
x0	Coordenada x del punto de inicio de la transición
y0	Coordenada y del punto de inicio de la transición
x1	Coordenada x del punto final de la transición
y1	Coordenada y del punto final de la transición

Más ejemplos

Ejemplo en línea

Defina una transición (de arriba a abajo) como estilo de relleno del rectángulo:

Demostración con JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método createLinearGradient() de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0,170);
my_gradient.addColorStop(0, "negro");
my_gradient.addColorStop(1,"white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Prueba y mira ‹/›

Ejemplo en línea

Defina una transición del negro al rojo y luego al blanco como estilo de relleno del rectángulo:

Demostración del uso del método createLinearGradient():

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método createLinearGradient() de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Prueba y mira ‹/›

Manual de referencia de HTML canvas

HTML: <template> etiqueta