Método scale() do canvas HTML
Definição e uso
scale() método para ajustar o zoom no desenho, maior ou menor.
Observação:Se você ajustar o zoom no 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 do canto superior esquerdo da tela.
Exemplo
Exemplo 1
Desenhe um retângulo, amplie para 200% e desenhe novamente um 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 estão disponíveis na parte inferior da página.
Sintaxe
context.scale(scalewidth,scaleheight);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| scalewidth | Ajuste a largura atual do desenho (1=100%, 0.5=50%, 2=200%, por exemplo). |
| scaleheight | Ajuste a altura atual do desenho (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%, depois desenhar novamente o retângulo; ampliar para 200%, 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 |
Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
