manual de referencia HTML

catálogo de etiquetas HTML

propiedad fillStyle del canvas HTML

la propiedad fillStyle() del elemento HTML canvas se utiliza para establecer el color, gradiente o patrón de dibujo. El valor por defecto es #000000. <elemento canvas> le permite usar JavaScript para dibujar gráficos en una página web. Cada lienzo tiene dos elementos que describen la altura y anchura del lienzo, respectivamente, la altura y anchura.

Ejemplo en línea

definir el color de relleno rojo para el rectángulo:

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo fillStyle en canvas HTML (Tutoriales básicos en HTML canvas oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta <canvas>./canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Prueba aquí ‹/›

compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten la propiedad fillStyle.

noticia:Internet Explorer 8 y versiones anteriores no admiten el elemento canvas.

definición y uso

<elemento canvas> le permite usar JavaScript para dibujar gráficos en una página web. Cada lienzo tiene dos elementos que describen la altura y anchura del lienzo, respectivamente, la altura y anchura.

por defecto:	#000000
sintaxis de JavaScript:	context.fillStyle=color\|gradient\|patrón;

valor de atributo

valor	descripción
color	indicando el color de relleno del dibujo valor de color CSS.por defecto es #000000.
gradient	usado para rellenar el dibujo objeto de gradiente (lineal o radial).
patrón	usado para rellenar el dibujo patrón objeto.

más ejemplos

Ejemplo en línea

definir un gradiente (de arriba a abajo) como estilo de relleno de rectángulo:

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo fillStyle en canvas HTML (Tutoriales básicos en HTML canvas oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var mi_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);
</script>
<p>Nota: Internet Explorer　8y versiones anteriores no admiten la etiqueta canvas.</p>
</body>
</html>

Prueba aquí ‹/›

Ejemplo en línea

Definir un degradado de izquierda a derecha, como estilo de relleno del rectángulo:

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo fillStyle en canvas HTML (Tutoriales básicos en HTML canvas oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border: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>
<p>Nota: Internet Explorer　8y versiones anteriores no admiten la etiqueta canvas.</p>
</body>
</html>

Prueba aquí ‹/›

Ejemplo en línea

Definir un degradado desde negro hasta rojo hasta blanco como estilo de relleno del rectángulo:

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo fillStyle en canvas HTML (Tutoriales básicos en HTML canvas oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border: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,　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);
</script>
<p>Nota: Internet Explorer　8y versiones anteriores no admiten la etiqueta canvas.</p>
</body>
</html>

Prueba aquí ‹/›

Imágenes utilizadas:

Ejemplo en línea

Usar imágenes para rellenar el dibujo:

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo fillStyle en canvas HTML (Tutoriales básicos en HTML canvas oldtoolbag.com)</title>
</head>
<body>
<p>Aplicación de imagen:/p>
<img src="haha.gif" id="lamp">
<p>Canvas:/p>
<button onclick="draw(&39;repeat')">repetir</button>　
<button onclick="draw(&39;repeat-x')">repetir-x</button>　
<button onclick="draw(&39;repeat-y')">repetir-y</button>　
<button onclick="draw(&39;no-repeat')">no repetir</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d");
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

Prueba aquí ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta