HTML | método de escala de lienzo()

El método HTML canvas scale() se utiliza para escalar el dibujo actual a un tamaño más pequeño o más grande. Después de escalar el dibujo, todas las características del dibujo se escalaron. Tendrá que definir ante la lona.

Sintaxis:

context.scale( scalewidth, scaleheight )

Valores paramétricos:

  • scalewidth: Escala el ancho del dibujo actual (1=100%, 0.5=50%, 2=200%, etc.).
  • scaleheight: Escala la altura del dibujo actual (1=100%, 0.5=50%, 2=200%, etc.)

Ejemplo 1: este ejemplo utiliza el método canvas scale() para aumentar el tamaño del dibujo.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas scale() Method
    </title> 
</head> 
  
<body> 
<center>
<h1 style="color:green">GeeksforGeeks</h1>
    <canvas id="GFG"
            width="500"
            height="300"> 
</canvas> 
  
    <script> 
        var x = 
            document.getElementById("GFG"); 
        var contex = 
            x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(2, 2);
        contex.strokeRect(50, 50, 150, 100);
    </script> 
<center>
</body> 
  
</html> 

Producción:

Ejemplo 2: este ejemplo utiliza el método canvas scale() para disminuir el tamaño del dibujo.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas scale() Method
    </title> 
</head> 
  
<body> 
<center>
<h1 style="color:green">GeeksforGeeks</h1>
    <canvas id="GFG"
            width="500"
            height="300"> 
</canvas> 
  
    <script> 
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(0.5, 0.5);
        contex.strokeRect(50, 50, 150, 100);
    </script> 
</center>
</body> 
  
</html>                    

Producción:

Navegadores compatibles: los navegadores compatibles con el método HTML canvas scale() se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 9.0 o superior
  • Firefox
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por jit_t 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 *