¿Cómo especificar el ancho y la altura del lienzo usando HTML?

La etiqueta <canvas> en HTML se usa para dibujar gráficos en una página web usando JavaScript. Se puede usar para dibujar rutas, cuadros, textos, gradientes y agregar imágenes. Por defecto, no contiene bordes ni texto.

Sintaxis:

<canvas id="canvasID"> HTML Contents... <canvas>

Atributos: la etiqueta de lienzo tiene dos atributos que se enumeran a continuación.

  • altura: este atributo se utiliza para establecer la altura del lienzo.
  • ancho: este atributo se utiliza para establecer el ancho del lienzo.

Ejemplo 1:

HTML

<!-- HTML code to illustrate height and
     width attribute of canvas tag -->
<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to specify the width
        and height of the canvas?
    </h3>
  
    <canvas id="canvasID" height="200" width="200" 
        style="border:1px solid black">
    </canvas>
</body>
</html>

Producción:

Ejemplo 2:

HTML

<!-- HTML code to illustrate height and
    width attribute of canvas tag -->
<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to specify the width
        and height of the canvas?
    </h3>
  
    <canvas id="canvasID" height="200" width="200" 
        style="border:1px solid black">
    </canvas>
  
    <script>
        var canvas = document.getElementById("canvasID");
        // Getting a drawing context in the canvas
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100, 100, 90, 0, 2 * Math.PI);
        context.stroke(); 
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *