HTML canvas scale()Método
Objeto CanvasEjemplo
Dibuja un rectángulo, amplía al 200% y luego dibuja el rectángulo de nuevo:
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);
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método scale().
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
Definición y uso
El método scale() escala el dibujo actual a un tamaño mayor o menor.
Nota:Si escala el dibujo, todos los dibujos posteriores también se escalarán. El posicionamiento también se escalará. Si usa scale(2,2), el dibujo se posicionará al doble de distancia desde la esquina superior izquierda del lienzo.
| Sintaxis de JavaScript: | context.scale(scalewidth,scaleheight); |
|---|
Valores de parámetros
| Parámetro | Descripción |
|---|---|
| scalewidth | Escala el ancho del dibujo actual (1=100%, 0.5=50%, 2=200%, y así sucesivamente). |
| scaleheight | Escala la altura del dibujo actual (1=100%, 0.5=50%, 2=200%, y así sucesivamente). |
Más ejemplos
Ejemplo
Dibuja un rectángulo; amplía al 200%, dibuja el rectángulo de nuevo; amplía al 200%, dibuja el rectángulo de nuevo; amplía al 200%, dibuja el rectángulo de nuevo:
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);
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);
Pruébalo »
Otras extensiones