rotate 예제

rotate()에 의해 생성된 회전량은 지정됩니다. 양수인 경우 무브먼트는 시계 방향으로 움직입니다. 음수인 경우 시계 반대 방향으로 표시됩니다. 180°의 회전을 점 반사라고 합니다. 회전 하는 개체는 5 점 별입니다. 별은 회전 방법에 사용하는 원점과 일치하도록 0,0으로 설정된 xy 점을 중심으로 정의됩니다. 별은 lineTo 메서드를 사용하여 두 동심원에 플롯된 점에서 선을 그립니다. 별 의 끝에 대한 반경 1개에는 5개의 포인트가 있고, 1/2반경(항성의 안쪽 부분)에는 5점이 있습니다. 요소에 여러 변환을 적용하려면 변환을 지정하는 순서에 주의해야 합니다. 예를 들어, 번역하기 전에 회전하면 새 회전 축을 따라 변환됩니다! 예제의 주요 부분은 그리기 함수입니다. 먼저 번역 방법을 사용하여 0,0 원원을 캔버스의 중심으로 이동합니다.

캔버스를 다시 그릴 때마다 오브젝트를 1도 회전합니다. 회전 방법은 라디안만 허용하므로 수식 라디안 = (도 * Math.PI)/180으로 도변환합니다. 이 알고리즘에서는 1도를 대체해 회전 메서드에 전달합니다. 참조 콘텐츠를 업데이트하여 변환 방법을 사용하여 캔버스의 현재 원근원을 변경하는 방법에 대해 이야기했습니다. 회전 방법은 현재 0,0 위치를 피벗점으로 사용하여 캔버스에 회전 행렬을 적용합니다. 오브젝트를 회전하려면 0,0점의 방향을 오브젝트의 중심으로 다시 방향조정해야 합니다. 이제 별을 회전하려면 애니메이션 함수를 호출합니다. 애니메이션은 매우 간단합니다. 먼저 draw() 함수를 호출하여 그래픽을 그립니다.

그런 다음 requestAnimationFrame 메서드를 사용하여 자체를 호출합니다. requestAnimationFrame 메서드는 setTimeout을 사용 하 여 기존 시간 조각 메서드에 비해 개선. 그리고 1도 ctx.rotate ((1 * 수학.PI) / 180 회전); 위에서 언급한 요소가 회전하는 고정점을 변환 원점이라고도 합니다. 기본값은 요소의 중심으로 설정되지만 변환 원본 속성을 사용하여 사용자 지정 변환 원원을 설정할 수 있습니다. 이제 좌표 평면에서 점과 모양이 회전하는 방법을 살펴보겠습니다. 원점을 다른 각도로 회전할 때 좌표의 패턴을 기록하는 것이 좋습니다. 회전은 오브젝트가 고정점을 대상으로 회전하는 변환입니다. 회전 방향은 시계 방향 또는 반시계 방향일 수 있습니다.

캔버스 회전 방법에 대한 참조 문서를 처음 작성했을 때 간단한 예제를 포함했습니다. 문제는 이미지의 중심이 아닌 왼쪽 위 모서리에서 이미지를 회전한다는 것입니다. 독자의 피드백에 대한 답변으로 중앙에서 회전하는 더 나은 그래픽으로 새롭고 간단한 예제를 만들었습니다. rotate()를 사용하는 주요 문제는 0,0 원점이 올바른 위치에 있는지 확인하는 것입니다. 회전 중심과 회전 각도를 감안할 때 오브젝트의 회전 된 이미지를 결정할 수 있습니다. 이 예제http://samples.msdn.microsoft.com/Workshop/samples/canvas/rotate.htm 몇 가지 단계가 있습니다. 처음에는 캔버스 개체를 얻고 캔버스의 중심을 미리 계산하기 위해 몇 가지 전역 변수를 설정했습니다. 회전() CSS 함수는 요소를 변형하지 않고 2D 평면의 고정점을 중심으로 요소를 회전하는 변환을 정의합니다. 그 결과는 데이터 유형입니다.

그런 다음 스트로크스타일, 선폭 및 채우기스타일을 설정하고 스트로크 및 채우기 메서드를 호출합니다.

This entry was posted in Uncategorized. Bookmark the permalink.