Introducción al artículo de Wulin.com (www.vevb.com): la aplicación de etiquetas de lienzo para la práctica diaria HTML5 - Transformación de matriz.
Hasta ahora, hemos aprendido la tecnología de transformación de gráficos implementada mediante el uso de la transformación de coordenadas. Cuando la transformación de coordenadas no puede satisfacer nuestras necesidades, podemos usar la tecnología de transformación de matriz. A continuación, introduciremos técnicas de transformación y deformación de matriz más complejas.La matriz se usa específicamente para lograr la deformación gráfica. Se usa junto con coordenadas para lograr el propósito de la deformación. Cuando se crea el contexto gráfico, realmente se crea una matriz de transformación predeterminada. Si esta matriz no se modifica, la figura dibujada a continuación dibujará la figura con la esquina superior izquierda del lienzo como origen coordinado. La figura dibujada no será escalada y deformada. Sin embargo, si esta matriz de transformación se modifica, la situación será diferente.
Método de transformación
Los tres métodos mencionados en la sección anterior utilizando la transformación de coordenadas para la deformación del gráfico:
traducir (x, y);
escala (x, y);
girar (ángulo);
Todos pueden ser reemplazados por el método de transformación, y los seis parámetros en contexto. Transformación (a, b, c, d, x, y); son los siguientes:
traducir (x, y);
escala (a, d);
Rotar (b, c); // Este método en realidad tiene solo un parámetro. Para facilitar la comprensión y corresponder a la transformación, se utilizan los 2 parámetros restantes. Lo puse aquí para decirle que estos dos parámetros tienen una función similar y están relacionados con la rotación.
Caso de código