Manual de referencia de HTML

大全 de etiquetas HTML

Método fillRect() en HTML canvas

fillRect() es un método de Canvas 2Método de dibujo de rectángulo lleno API de Canvas. El punto de partida del rectángulo está en la posición (x, y), el tamaño del rectángulo es width y height, y la propiedad fillStyle determina el estilo del rectángulo.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar 100*100 píxeles cuadrado relleno:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método fillRect() en HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="200" alt="150" style="border:1px sólido #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

Pruebe aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

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

Nota:Internet Explorer 8 Las versiones anteriores a la 5 no soportan el elemento <canvas>.

Definición y uso

El método fillRect() dibuja un rectángulo 'rellenado'. El color predeterminado de relleno es negro.

Consejo:Utilice fillStyle Atributos para establecer el color, degradado o patrón utilizado para rellenar el dibujo.

Sintaxis de JavaScript:	context.fillRect(x,y,width,height);

Valor del parámetro

Parámetro	Descripción
x	La coordenada x del cuadrante superior izquierdo del rectángulo.
y	La coordenada y del cuadrante superior izquierdo del rectángulo.
width	El ancho del rectángulo, en píxeles.
height	La altura del rectángulo, en píxeles.

Manual de referencia de canvas HTML

HTML: <template> etiqueta