Método de escala HTML canvas
Definición y uso
scale() Método para ajustar el tamaño del 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 ángulo superior izquierdo de la lienzo.
Ejemplo
Ejemplo 1
Dibuje un rectángulo, amplíe al 200% y dibuje otro rectángulo:
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 en la parte inferior de la página.
Sintaxis
context.scale(scalewidth,scaleheight);
Valor del parámetro
| Parámetro | Descripción |
|---|---|
| scalewidth | Ajuste el ancho actual del dibujo (1=100%, 0.5=50%, 2=200%, etcétera). |
| scaleheight | Ajuste la altura actual del dibujo (1=100%, 0.5=50%, 2=200%, etcétera). |
Más ejemplos
Ejemplo 2
Dibujar un rectángulo; ampliar al 200%, dibujar otro rectángulo; ampliar al 200%, luego dibujar otro rectángulo; ampliar al 200%, dibujar otro rectángulo:
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 versiones anteriores no admiten el elemento <canvas>.
