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