HTML5 Transformações do Canvas

HTML5 Métodos de transformação do Canvas, demonstração de exemplo online sobre como usar HTML5 Canvas para rotação, movimento, escalonamento, rotação em torno de diferentes pontos, configuração de proporção de escalonamento, etc.

Você pode aplicar transformações ao HTML5qualquer conteúdo desenhado no canvas. Esta é a lista de transformações que você pode aplicar:

• movimento (mover o conteúdo desenhado)

• Rotação

• escala

Neste artigo, introduzimos todas essas transformações

matriz de transformação

Você pode2Definir a matriz de transformação no contexto D. Esta matriz será multiplicada por todo o conteúdo desenhado no canvas. Para os exemplos usados neste tutorial, defino-o como a matriz 'identidade', que, ao multiplicar o conjunto de coordenadas x, y, resulta em x, y. Em outras palavras, não há nenhuma transformação.
Este é o método de definir a matriz de transformação como matriz unitária:

context.setTransform(1,　0,　0,　1,　0,　0);

Movimento

Você pode aplicar movimento a tudo que for desenhado no canvas. Movimento significa relocalização do conteúdo desenhado. Este é o modo como você define o movimento no código:

var　x　=　100;
var　y　=　　50;
context.translate(x,　y);

Este exemplo move todas as formas desenhadas no canvas no eixo x100，mover na eixo y50。
Atenção: a translação é aplicada apenas às formas desenhadas após a chamada da função translate(). As formas desenhadas antes da chamada da função não são afetadas.
Este é outro exemplo. Dois retângulos foram desenhados no mesmo ponto de coordenadas, mas um retângulo foi desenhado antes da chamada da função translate() e outro após a chamada da função.

<canvas id="ex1" width="500" height="150" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d);
context.fillStyle = "#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle = "#0000ff";
context.fillRect(10,10,　100,　100);
</script>

Este é o resultado ao desenhar no canvas:

Rotação

Você pode aplicar rotação automática em HTML5Qualquer forma desenhada no canvas. Isso é feito através de rotate()2A função no contexto D é concluída. Este é um exemplo simples:

context.rotate(radians);

O ângulo de rotação é passado como parâmetro para a função rotate(). Este valor deve ser em radianos, não em graus.
As formas desenhadas após a configuração de rotação girarão em torno do ponto 0,0 no canvas. Este é o canto superior esquerdo do canvas.
Como a translação, a rotação é aplicada apenas a todas as formas desenhadas após a chamada da função rotate().
Este é um exemplo de desenhar o mesmo retângulo antes e após a configuração de rotação:

<canvas id="ex2" width="500" height="150" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d);
　context.fillStyle = "#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
　context.fillStyle = "#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

Esta é a aparência ao desenhar um retângulo no canvas:

Girar em torno de um ponto diferente

Como mencionado anteriormente, todas as formas giram em torno do canto superior esquerdo do canvas (0,0). Mas o que acontece se você quiser girar a forma em torno de um ponto diferente? Por exemplo, girar a forma em torno de seu próprio centro?
Para girar uma forma em torno de seu próprio centro, é necessário primeiro mover o canvas para o centro da forma, girar o canvas, mover o canvas de volta para 0,0 e então desenhar a forma.
Este é um exemplo de código que faz um retângulo azul girar em torno de seu centro:

<canvas id="ex3" width="500" height="150" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
var　cx　　　　　=　x　+　0.5　*　width;
var　cy　　　　　=　y　+　0.5　*　height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
context.translate(-cx,　-cy);　//set center back to 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Esta é a aparência ao desenhar no canvas:

Este exemplo primeiro move o centro do canvas para o centro do quadrado (cx, cy). Em seguida, o canvas é girado25O canvas é novamente convertido para 0,0. Agora, o canvas está girando em torno de cx, cy25graus. Todo o conteúdo que você desenhar será rotado em torno de cx, cy. Finalmente, o retângulo é desenhado como se nada tivesse acontecido, mas agora ele será rotado em torno de cx, cy.25graus. Isso pode ser feito apenas com chamadas de transformação. As coordenadas do retângulo não mudam. Observe que context.fillRect(), os dois chamados para desenhar os retângulos vermelho e azul são os mesmos. É a chamada de transformação entre eles que os fazem aparecer em diferentes posições e posições de rotação

escala

Pode-se aplicar escala a5Todas as formas desenhadas na tela são aplicadas automaticamente à escala.
Ao escalar, é possível escalar todas as coordenadas nas eixos x e y por alguns fatores. Você pode usar a função scale() para definir esses fatores, conforme mostrado a seguir:

var scaleX =　2;
var scaleY =　2;
context.scale(scaleX, scaleY);

Este exemplo escala todas as coordenadas nas eixos x e y2vezes.
Como translate() e rotate(), a escala se aplica apenas às formas desenhadas após a chamada scale().
Este é um exemplo de código para desenhar retângulos vermelhos e azuis na tela, onde a escala se aplica ao retângulo azul:

<canvas id="ex5" width="500" height="250" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Aqui estão os gráficos gerados na tela:

Observe que o tamanho do retângulo azul é duas vezes maior que o do retângulo vermelho.
Atenção, a distância da esquina superior esquerda do retângulo azul até o canto superior esquerdo da tela (0,0) também é duas vezes. Todas as coordenadas são escaladas duas vezes, assim como a esquina superior esquerda do retângulo. Para evitar que a forma se mova durante a escala, é necessário combinar a escala com a translação.

fator de escala

Você pode usar a função de escala para implementar a função de escalonamento. O canvas abaixo contém4retângulos. Abaixo do canvas há um campo de entrada para alterar o nível de escala (fator de escala).

Grau de Escala:

Se você ver o campo de texto com o valor de escala, insira entre1até10nível de escala entre, e saia do campo de texto para ver o resultado. Se você ver o deslizador, basta movê-lo.

Combinação de Translação, Rotação e Escala

Claro, os três transformações podem ser combinadas no mesmo canvas. Mas, como ao combinar rotação e translação,2A ordem de chamada das funções também é muito importante. Se scale() for chamado antes de translate() e outros, o resultado pode parecer diferente. Pode ser necessário ajustar a ordem das chamadas das funções para que funcione corretamente