Manual de referencia HTML

Lista completa de etiquetas HTML

Método strokeRect() de HTML canvas

strokeRect() es un método de Canvas 2D API en canvas, un método para dibujar un rectángulo de anchura w, altura h y punto de partida (x, y) usando el estilo de pintura actual. Este método dibuja directamente en el lienzo sin modificar la ruta actual, por lo que cualquier llamada posterior a fill() o stroke() no tiene efecto en él.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar 100*100 píxeles cuadrado:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método strokeRect() de HTML canvas (Tutoriales básicos de la web w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　canvas etiqueta.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

Pruebe aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Safari soportan strokeRect() Métodos.

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

Definición y uso

La función strokeRect() dibuja un rectángulo (sin rellenar). El color predeterminado del trazo es negro.

Consejo:Utilice strokeStyle Propiedades para establecer el color, degradado o patrón del trazo.

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

Valor del parámetro

Parámetros	Descripción
x	La coordenada x del extremo superior izquierdo del rectángulo.
y	La coordenada y del extremo 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