Método Canvas scale()
Definição e uso
scale() Método para ajustar o zoom do desenho, maior ou menor.
Notas:Se você ajustar o zoom do desenho, todos os desenhos subsequentes também serão ajustados. A localização também será ajustada. Se você escrever scale(2,2)então o desenho será posicionado a duas vezes a distância da esquerda superior do canvas.
Exemplo
Exemplo 1
Desenhar um retângulo, ampliar para 200%, e desenhar novamente o retâ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);
Dica:Mais exemplos no rodapé da página.
Sintaxe
context.scale(scalewidth,scaleheight);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| scalewidth | Ajustar a largura do desenho atual (1=100%, 0.5=50%, 2=200%, etc.). |
| scaleheight | Ajustar a altura do desenho atual (1=100%, 0.5=50%, 2=200%, etc.). |
Mais exemplos
Exemplo 2
Desenhar um retângulo; ampliar para 200%, desenhar novamente o retângulo; ampliar para 200%, e desenhar novamente o retângulo; ampliar para 200%, e desenhar novamente o retâ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);
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
