HTML5 Canvas는 팬/줌/회전 데모 예제(스크린샷 포함)를 구현합니다._html5 튜토리얼 기술

// 번역은 시작점을 중앙으로 이동하고 다시 왼쪽 상단 모서리로 이동합니다.
function renderText(width, height, context) {
context.translate(width/ 2, height / 2) // 중심점 좌표 (0, 0)
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("게임을 종료하려면 를 누르세요.",5 50);
context.translate(-width/2, -height/2); // 변환은 (0,0) 좌표를 왼쪽 상단으로 복원합니다.
context.fillText("맨 위로 돌아왔습니다. ",5,50) ;
}

// 직사각형을 번역합니다.
function drawPath(context) {
context.translate(200,200)
context.scale(2,2);// Scale 원래 모양의 두 배 크기
context.StrokeStyle= "green";
context.beginPath()
context.moveTo(0,40)
context.lineTo(80,40); 🎜>context.lineTo(40, 80);
context.closePath();
context.Stroke()
}

// 새 점. x = x * cos(-angle) -y * sin(-angle),
// 새 점.y = y * cos(-angle) x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("여기 있어요!!!",5,50 );
/ / -90도 회전
// context.rotate(-Math.PI/2)
// context.fillStyle="blue"
// context.fillText( "나 여기 있어요!", -400,30);
// 90도 회전
context.rotate(Math.PI/2)
context.fillStyle="blue"; 🎜>context.fillText( "나 여기 있어요!!!",350,-420)
console.log(Math.sin(Math.PI/2))// 90도 회전 및 10개 선 그리기
context.fillStyle="green";
for(var i=0; i<4; i ) {
var x = (i 1)*20>var y = (i 1)*60 ;
var newX = y;
var newY = -x;
context.fillRect(newX,newY, 200, 6)
} >

일반적인 접근 방식은 회전과 이동을 함께 사용하는 것입니다. 먼저 좌표(0,0)를 중심 위치로 이동합니다
(너비/2, 높이/2)를 이동한 다음 회전(수학)을 사용합니다. .PI/2) 회전을 완료합니다
코드 예는 다음과 같습니다.

context .fillText("2D 컨텍스트 회전 및 변환", 10, 10)
context.restore(); 2D 컨텍스트 회전 및 변환", 10, 10);
}



모든 JavaScript 코드: