Los últimos tutoriales de desarrollo web
 

HTML canvas fillStyle Propery

<Objeto Canvas

Ejemplo

Definir un relleno de color rojo para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
fillStyle() 4.0 9.0 3.6 4.0 10.1

Definición y Uso

Los conjuntos de propiedades fillStyle o devuelve el color, degradado o patrón utilizado para llenar el dibujo.

Valor por defecto: # 000000
la sintaxis de JavaScript: context .fillStyle= color | gradient | pattern ;

Valores de propiedad

Valor Descripción Juegalo
color Un valor de color CSS que indica el color de relleno del dibujo. El valor por defecto es # 000000 Juegalo "
gradient Un objeto gradiente ( lineal o radial ) que se utiliza para llenar el dibujo
pattern Un patrón objeto de usar para llenar el dibujo

Ejemplos

Más ejemplos

Ejemplo

Definir un gradiente (top to bottom) como el estilo de relleno para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Ejemplo

Definir un gradiente (left to right) como el estilo de relleno para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Ejemplo

Definir un gradiente que va de negro, al rojo, al blanco, como el estilo de relleno para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Imagen a utilizar:

Lámpara

Ejemplo

Utilice una imagen para rellenar el dibujo:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Inténtalo tú mismo "

<Objeto Canvas