wulin.com의 기사 소개 (www.vevb.com) : HTML5 일일 연습을위한 캔버스 태그 적용 - 매트릭스 변환.
지금까지 좌표 변환을 사용하여 구현 된 그래프 변환 기술을 배웠습니다. 좌표 변환이 우리의 요구를 충족시킬 수 없으면 매트릭스 변환 기술을 사용할 수 있습니다. 다음으로,보다 복잡한 매트릭스 변환 및 변형 기술을 소개 할 것입니다.매트릭스는 그래픽 변형을 달성하기 위해 특별히 사용됩니다. 변형의 목적을 달성하기 위해 좌표와 함께 사용됩니다. 그래픽 컨텍스트가 생성되면 기본 변환 매트릭스가 실제로 생성됩니다. 이 행렬이 수정되지 않으면 다음으로 그린 그림은 캔버스의 왼쪽 상단 모서리가 좌표 원점으로 그림을 그립니다. 그려진 그림은 스케일링되고 변형되지 않습니다. 그러나이 변환 매트릭스가 수정되면 상황이 다릅니다.
변환 방법
그래프 변형에 대한 좌표 변환을 사용하여 이전 섹션에서 언급 된 세 가지 방법 :
번역 (x, y);
스케일 (x, y);
회전 (각도);
그것들은 모두 변환 방법으로 대체 될 수 있고, 6 개의 매개 변수는 컨텍스트 (a, b, c, d, x, y); 다음과 같습니다.
번역 (x, y);
스케일 (a, d);
회전 (b, c); //이 메소드에는 실제로 매개 변수가 하나뿐입니다. 이해를 용이하게하고 변환에 해당하기 위해 나머지 2 개의 매개 변수가 사용됩니다. 이 두 매개 변수는 기능이 비슷하고 회전과 관련이 있음을 알려주기 위해 여기에 두었습니다.
코드 케이스