Manual de referência HTML

大全 de HTML etiquetas

Método scale() do canvas HTML

scale() é o método Canvas 2D API adiciona métodos de transformação de escala para unidades canvas com base em x e y. Padrão Em canvas, um unidade realmente é um pixel. Por exemplo, se usarmos 0.5como fator de escala, o tamanho final será 0.5pixels, e o tamanho da forma será metade do original. Da mesma forma, usaremos2.0 como fator de escala, aumentará o tamanho unitário para dois pixels. O tamanho da forma será dobrado.

Manual de referência do canvas do HTML

Exemplo online

Desenhar o retângulo, ampliar para 200%，e desenhar novamente o retângulo:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso da método scale() do canvas do HTML-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　tag canvas.
</canvas>
<script>
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);
</script>　
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome e Safari suportam scale() Método.

Atenção:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método scale() ajusta o desenho atual para maior ou menor.

Atençã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ê scale(2,2), então o desenho será posicionado a duas vezes a distância do canto superior esquerdo da tela.

Sintaxe JavaScript:	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.).

Exemplo online

Desenhar um retângulo; ampliar para 200%，desenhar novamente o retângulo; ampliar para 200%，desenhar novamente o retângulo; ampliar para 200%，desenhar novamente o retângulo:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso da método scale() do canvas do HTML-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　tag canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Teste e veja ‹/›

Manual de referência do canvas do HTML

HTML: <template> tag