Manual de referencia HTML

大全 de etiquetas HTML

Atributo height de HTML canvas

La propiedad height especifica el alto del elemento <canvas> en píxeles, y cada vez que se ajuste la altura o anchura del lienzo, se borrará el contenido del lienzo.

HTML <canvas> etiqueta

Ejemplo en línea

Un elemento <canvas> de2elemento <canvas> de 00 píxeles:

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso del atributo height de <canvas> en HTML-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px de ancho sólido">
Tu navegador no admite el HTML5　etiqueta canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Todos los navegadores principales admiten la propiedad height.

Nota: Internet Explorer 8 y versiones anteriores de IE no admiten la etiqueta <canvas>.

Definición y uso

La propiedad height especifica el alto del elemento <canvas> en píxeles.
Consejo: Utiliza la propiedad width para especificar el ancho del elemento <canvas> en píxeles.

Consejo: Cada vez que se ajuste la altura o anchura del lienzo, se borrará el contenido del lienzo (ver el ejemplo en la parte inferior de la página).

Consejo: Por favor, visita nuestra HTML Canvas Aprende más sobre <canvas> en el tutorial de HTML.

HTML 4.01 con HTML 5 diferencias

<canvas> es un elemento de HTML5 es un nuevo elemento en

Sintaxis

<canvas height="pixels">

Valor del atributo

Valor	Descripción
pixels	Define la altura del canvas en píxeles (por ejemplo "100px" o simplemente "100"）。Por defecto es "150"。

Más ejemplos

Limpiar el lienzo al establecer las propiedades width o height (usando JavaScript):

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso del atributo width de <canvas> en HTML-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px de ancho sólido">
Tu navegador no admite el HTML5　etiqueta canvas.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
function clearCanvas() {
　　c.height =　300;
}
</script>
<button onclick="clearCanvas()">Borrar canvas</button>
</body>
</html>

Prueba para ver ‹/›

HTML <canvas> etiqueta

HTML: <template> etiqueta