Como construir uma imagem transformada na lona do javascript para HTML5 e CSS3 Programação
transformações são operações matemáticas em javascript que podem ser aplicadas a qualquer desenho ou imagem em você HTML5 e CSS3 página para alterar a aparência. Existem três grandes transformações:
tradução: Mover uma determinada quantia em X e Y
rotação: Girar em torno de um determinado ponto
escala: Alterar o tamanho do desenho em X e Y
O elemento permite que todas estas operações em qualquer tipo de desenho. No entanto, a forma como o elemento faz isso fica um pouco mais perto de matemática do que você pode ter começado antes. Transformações no elemento de tela pode ser difícil de entender até que você entender um pouco sobre como eles realmente funcionam.
Em matemática, você realmente não transformar objetos. Em vez disso, você modificar o sistema de coordenadas, e desenhar sua imagem no sistema recém-transformada de coordenadas. É comum em um aplicativo de desenho vetorial ter vários sistemas de coordenadas escondidos de trabalho ao mesmo tempo. Isso é importante porque é a maneira transformações lona trabalhar. Essencialmente quando você quer executar transformações em um objeto, você poderá fazer o seguinte:
Anunciar o início de um sistema de coordenadas temporária.
A imagem principal já tem seu próprio sistema de coordenadas que não vai mudar. Antes você pode transformar qualquer coisa, você precisa para construir um novo sistema de coordenadas para realizar essas mudanças. o salvar() comando indica o início de uma nova definição do sistema de coordenadas.
Mova o centro com traduzir().
A origem (0, 0) começa no canto superior esquerdo da tela por padrão. Normalmente você vai construir seus objetos transformados no (novo) origem e mover a origem para posicionar o objeto. Se vocês translate (50, 50) e, em seguida, desenhar uma imagem em (0, 0), a imagem é tirada na origem do sistema de coordenadas temporária, que representa em (50, 50) na lona principal.
Girar o sistema de coordenadas com rotate ().
o rotate () comando roda o novo sistema de coordenadas em torno de sua origem. O parâmetro de rotação é formado em radianos.
Dimensionar o sistema de coordenadas em X e Y.
Você também pode alterar o novo sistema de coordenadas através da aplicação de valores de escala X e Y. Isto permite-lhe criar imagens esticadas e comprimidas.
Criar elementos no novo sistema de coordenadas.
Depois de aplicar todas as transformações que você quer, você pode usar todas as técnicas de desenho de tela comuns. No entanto, estes desenhos serão sorteados no sistema "virtual" de coordenadas que acabou de fazer, não no principal sistema de coordenadas da tela.
Feche o sistema de coordenadas temporária.
Geralmente você vai querer aplicar diferentes transformações para diferentes partes da sua tela. Quando você terminar com uma transformação particular, usar o restaurar() comando para fechar o novo sistema de coordenadas. Todos os comandos de desenho subseqüentes vai usar o padrão do sistema do objeto de coordenadas.