El elemento canvas es parte de HTML5 que nos permite la representación dinámica y programable de formas 2D e imágenes de mapa de bits. Con la ayuda del lienzo HTML5, podemos crear juegos, gráficos, animaciones y composición de imágenes en 2D. El lienzo tiene dos tamaños, el tamaño del elemento y el tamaño de la superficie de dibujo. El tamaño predeterminado tanto para el elemento como para la superficie de dibujo es de 300 x 150 píxeles de pantalla.
Para establecer el lienzo de alto y ancho, HTML5 tiene dos atributos:
- Altura: con la ayuda del atributo Altura podemos establecer la altura.
- Ancho: con la ayuda del atributo Ancho podemos establecer el ancho.
Sintaxis:
<canvas id="myCanvas"> HTML Contents... <canvas>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green"> Welcome To GeeksForGeeks</h1>
<h1>Canvas Height and Width Attributes</h1>
<canvas id="Canvas" width="300"
height="300"
style="border:3px solid">
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "Green";
ctx.fillRect(100, 100, 100, 100);
</script>
</body>
</html>
Producción:
Ejemplo: establecer alto y ancho usando CSS
HTML
<!DOCTYPE html>
<html>
<style>
#myCanvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: 3px solid green;
width: 300px;
height: 190px;
}
</style>
<body>
<h1 style="color:green">
Welcome To GeeksForGeeks
</h1>
<h1>Canvas Height and Width Attributes</h1>
<canvas id="myCanvas"></canvas>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA