Html5 Canvas 예비 연구 노트(6) - 변환

html5에서는 번역, 크기 조정, 회전을 포함한 다양한 그래픽 변형이 가능합니다. 두 가지 방법, 즉 행렬 방법과 함수 방법이 있습니다. 다음은 이 두 가지 방법을 사용하여 이동, 크기 조정 및 회전을 구현하는 방법을 설명합니다.

1. 번역:

 context.fillRect(50,50,50,50);
 context.translate(100,100);
 context.fillRect(50,50,50,50);

가운데 문장이 없으면 첫 번째 직사각형과 두 번째 직사각형이 겹치기 때문에 보이는 효과는 직사각형 하나뿐입니다. 번역하면 효과는 다음과 같습니다.

우선 이 글에서 소개하는 메소드들은 모두 상태입니다. 즉, 해당 범위는 그 아래의 모든 코드에 영향을 미치며 save 및 restore를 사용하여 저장하고 팝업 상태. 위에서는 번역 문제를 해결하기 위한 함수 호출을 설명합니다. context의 transform 메서드를 사용할 수 있습니다. 행렬 변경 작업에는 6개의 매개변수가 있습니다. 일부 설명에서는 이 6개의 매개변수를 전체적으로 소개하는 것을 선호합니다. 즉, 이러한 매개변수가 각각 변환, 크기 조정 및 회전을 담당한다는 의미입니다. 전체적으로 처음 4개 매개변수는 크기 조정 및 회전을 담당하고, 마지막 2개 매개변수는 이동, 처음 4개 매개변수는 1, 4은 그룹, 2, 3은 그룹, 1 및 2은 x 값이고, 3 및 4은 y, 5 및 6은 각각 x, y를 번역한 것입니다. 위 코드에서 행렬을 사용하는 경우 다음과 같이 작성해야 합니다.

context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);

여기서 코드의 두 번째 문장은 세 번째 문장에서 주석 처리한 코드와 동일한 의미를 갖습니다.

1

, 4 그룹에 포함된 이유입니다. 및 2, 3이 그룹 중 하나에 1 직사각형이 0이면 크기가 0으로 조정됩니다. 2.Zoom

 context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.scale(0.5,0.5);
 context.fillRect(0,0,50,50);

스케일링과 회전 모두 번역이 필요합니다. 왜냐하면 다음 코드를 작성하면 문제가 발생하기 때문입니다

context.fillRect(50,50,50,50);
 context.scale(0.5,0.5);
 context.fillRect(150,50,50,50);

이 코드는 위의 코드와 동일한 것 같지만 실제로는 다릅니다.

context.scale

을 호출하면 모든 좌표가 원래 크기의 절반으로 축소되므로 효과는 다음과 같습니다. 다음과 동일 다름다음은 코드의 첫 번째 단락과 두 번째 단락을 비교한 것입니다.

후자의 사진이 어긋난 것을 볼 수 있습니다.

아래 매트릭스 방식을 소개합니다:

context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);

위와 마찬가지로 코드를 주석 처리하는 효과도 동일합니다. 동일합니다. 먼저 번역해야 합니다. 동일합니다. 첫 번째 파라미터와 네 번째 파라미터 첫 번째 파라미터 그룹은 두 번째, 세 번째 파라미터 그룹과 동일합니다.

3. 회전

context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.rotate(Math.PI/4);
 context.fillRect(0,0,50,50);

같은 이유로 회전 각도도 먼저 변환해야 합니다. 효과는 다음과 같습니다.

下面介绍的是使用矩阵法：

context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。

如有错误，希望大家多多指正

 以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！