Manual de referencia HTML

Completos de etiquetas HTML

Método rect() de HTML canvas

rect() es Canvas 2Método para crear un camino de rectángulo en D API, la posición de inicio del rectángulo es (x, y), el tamaño es width y height. El rectángulo4puntos conectados por líneas rectas, el subcamino se utiliza como etiqueta de cierre, por lo que puede rellenar o trazar un rectángulo.

Manual de referencia de HTML canvas

Ejemplo en línea

Dibuje 150*10Rectángulo de 0 píxeles:

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　rect()　método de uso (Fundamentos de Tutorial 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");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

Probar y ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome y Safari admiten rect() método.

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

Definición y uso

El método rect() crea un rectángulo.

Consejo:Utilice stroke() ofill() El método dibuja un rectángulo en el lienzo.

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

Valor del parámetro

Parámetros	Descripción
x	Coordenada x del vértice superior izquierdo del rectángulo.
y	Coordenada y del vértice superior izquierdo del rectángulo.
width	Anchura del rectángulo, en píxeles.
height	Altura del rectángulo, en píxeles.

Ejemplo en línea

Cree tres rectángulos utilizando el método rect()

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　rect()　método de uso (Fundamentos de Tutorial 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");
//　Rectángulo rojo
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　Rectángulo verde
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　Rectángulo azul
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

Probar y ver ‹/›

Manual de referencia de HTML canvas

HTML: <template> etiqueta