Tutorial de instância html5: tag telas implementa a transformação da matriz

Artigo Introdução de wulin.com (www.vevb.com): A aplicação de tags de tela para HTML5 DIÁRIO PRÁTICA - Transformação da matriz.

Até agora, aprendemos a tecnologia de transformação de gráficos implementada usando a transformação de coordenadas. Quando a transformação da coordenada não pode atender às nossas necessidades, podemos usar a tecnologia de transformação da matriz. Em seguida, introduziremos técnicas mais complexas de transformação e deformação da matriz.

A matriz é usada especificamente para obter deformação gráfica. É usado junto com coordenadas para alcançar o objetivo da deformação. Quando o contexto gráfico é criado, uma matriz de transformação padrão é realmente criada. Se essa matriz não for modificada, a figura desenhada em seguida desenhará a figura com o canto superior esquerdo da tela como origem coordenada. A figura desenhada não será dimensionada e deformada. No entanto, se essa matriz de transformação for modificada, a situação será diferente.

Método de transformação

context.transform (a, b, c, d, x, y);

Este método possui 6 parâmetros, entre os quais os quatro parâmetros A, B, C e D são usados ​​principalmente para deformar a figura; X e Y representam pontos de coordenadas em movimento.

Os três métodos mencionados na seção anterior usando a transformação de coordenadas para deformação gráfica:

traduzir (x, y);

escala (x, y);

girar (ângulo);

Todos eles podem ser substituídos pelo método de transformação e os seis parâmetros no contexto.Transform (a, b, c, d, x, y); são os seguintes:

traduzir (x, y);

escala (a, d);

gire (b, c); // Esse método realmente possui apenas um parâmetro. Para facilitar a compreensão e corresponder à transformação, os 2 parâmetros restantes são usados. Coloquei aqui para dizer que esses dois parâmetros são semelhantes em função e estão relacionados à rotação.

Caso de código