Método de escala Canvas
Definición y uso
scale() Método para escalar el dibujo actual, más grande o más pequeño.
Notas:Si amplía el dibujo, todos los dibujos posteriores también se ampliarán. La ubicación también se ampliará. Si escribe scale(2,2)Entonces, el dibujo se ubicará a dos veces la distancia del cuadrado superior izquierdo de la pintura.
Ejemplo
Ejemplo 1
Dibujar un rectángulo, ampliar al 200%, luego dibujar un rectángulo nuevamente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Consejo:Más ejemplos a la parte inferior de la página.
Sintaxis
context.scale(scalewidth,scaleheight);
Valores de los parámetros
| Parámetros | Descripción |
|---|---|
| scalewidth | Escala actual de la anchura del dibujo (1=100%, 0.5=50%, 2=200%, etcétera). |
| scaleheight | Escala actual de la altura del dibujo (1=100%, 0.5=50%, 2=200%, etcétera). |
Más ejemplos
Ejemplo 2
Dibujar un rectángulo; ampliar al 200%, dibujar un rectángulo nuevamente; ampliar al 200%, luego dibujar un rectángulo nuevamente; ampliar al 200%, dibujar un rectángulo nuevamente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Los navegadores Internet Explorer 8 y anteriores no admiten el elemento <canvas>.
