HTML5 CANVAS는 번역/스케일링/회전 DEOM 예제 (스크린 샷 포함)를 구현합니다.

주석 : HTML5 Canvas는 구현할 수있는 그래픽 API를 제공하며,이를 통해 번역, 회전, 스케일링 등을 실현할 수 있습니다. 번역, 회전, 스케일링 및 참조 사진의 특정 구현을 공유하겠습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.

번역하다

좌표 변환 (x, y)는 (x, y) 수단 (0,0) 좌표를 (x, y)로 변환하고 원본 (0,0) 좌표는 (-x, -y)가됩니다.

그림은 다음과 같습니다.

번역 후 원래 좌표 지점 P (Ox, Oy)의 좌표 지점은 P (Ox-X, Oy-Y)이며, 여기서 지점 (x, y)은 번역입니다.

포인트 좌표 번역 (x, y).

코드 데모 :

// Translate는 startpoint를 Centera로 이동하고 왼쪽 상단으로 다시 이동합니다.

함수 rendertext (너비, 높이, 컨텍스트) {

context.translate (너비 / 2, 높이 / 2); // 중심점의 좌표는 (0, 0)입니다.

context.font = "18px arial";

Context.FillStyle = "Blue";

context.fillText ( "<ESC>를 눌러 게임 종료 게임", 5,50);

context.translate (-width/2, -height/2); // 번역 복구 (0,0) 좌표는 왼쪽 상단 코너입니다.

context.fillText ( "I 'm Back to Top", 5,50);

}

규모

스케일 (a, b)는 xy 축을 따라 객체를 각각*x, b*y 크기로 스케일링하는 것을 의미합니다. 효과는 그림에 나와 있습니다.

// 사각형을 번역합니다.

함수 drawpath (컨텍스트) {

Context.Translate (200,200);

Context.Scale (2,2); // 원래 모양의 두 번 크기

context.strokestyle = "Green";

context.beginpath ();

Context.Moveto (0,40);

Context.Lineto (80,40);

Context.lineto (40,80);

context.closepath ();

Context.Stroke ();

}

회전

각도 회전 회전 (Math.Pi/8)

회전하기 전의 좌표 p (x, y)는 상응하는 회전 후 p (rx, ry)입니다.

rx = x * cos (-angr)-y * sin (-angle);

ry = y * cos (-angr) + x * sin (-angle);

90 도의 회전은 다음과 같이 단순화 할 수 있습니다.

rx = y;

ry = -x;

캔버스의 기본 회전 방향은 시계 방향입니다. 데모 코드는 다음과 같습니다.

// new point.x = x * cos (-angr) -y * sin (-angle),

// new point.y = y * cos (-angr) +x * sin (-angle)

함수 renderRotateText (컨텍스트) {

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));

// rotae 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)를 번역 한 다음 회전을 완료하기 위해 회전 (Math.Pi/2)을 회전시킵니다.

코드 예제는 다음과 같습니다.

함수 saveAndRestoreContext (컨텍스트) {

context.save ();

Context.Translate (200,200);

context.rotate (math.pi/2);

Context.FillStyle = "Black";

context.fillText ( "2D 컨텍스트 회전 및 번역", 10, 10);

Context.Restore ();

context.fillText ( "2D 컨텍스트 회전 및 번역", 10, 10);

}

모든 JavaScript 코드 :

var tempContext = null; // 글로벌 변수 2D 컨텍스트

Window.onload = function () {

var canvas = document.getElementById ( "대상");

Canvas.width = 450;

Canvas.height = 450;

if (! canvas.getContext) {

Console.log ( "캔버스가 지원되지 않습니다. HTML5 호환 브라우저를 설치하십시오.");

반품;

}

// 캔버스의 2D 컨텍스트를 얻고 이미지를 그리십시오

tempContext = canvas.getContext ( "2d");

// renderText (canvas.width, canvas.height, tempContext);

SaveAndrestoreContext (TempContext);

// drawPath (tempContext);

}

// 번역은 시작점을 Centera로 이동하고 왼쪽 상단으로 돌아갑니다.

함수 rendertext (너비, 높이, 컨텍스트) {

context.translate (너비 / 2, 높이 / 2);

context.font = "18px arial";

Context.FillStyle = "Blue";

context.fillText ( "<ESC>를 눌러 게임 종료 게임", 5,50);

context.translate (-width/2, -height/2);

context.fillText ( "I 'm Back to Top", 5,50);

}

// 사각형을 번역합니다.

함수 drawpath (컨텍스트) {

컨텍스트. 트랜스 슬레이트 (200, 200);

Context.Scale (2,2); // 원래 모양의 두 번 크기를 확장합니다

context.strokestyle = "Green";

context.beginpath ();

컨텍스트 .Moveto (0, 40);

Context.lineto (80, 40);

Context.lineto (40, 80);

context.closepath ();

Context.Stroke ();

}

// new point.x = x * cos (-angr) -y * sin (-angle),

// new point.y = y * cos (-angr) + x * sin (-angle)

함수 renderRotateText (컨텍스트) {

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));

// rotae 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);

}

}

함수 saveAndRestoreContext (컨텍스트) {

context.save ();

Context.Translate (200,200);

context.rotate (math.pi/2);

Context.FillStyle = "Black";

context.fillText ( "2D 컨텍스트 회전 및 번역", 10, 10);

Context.Restore ();

context.fillText ( "2D 컨텍스트 회전 및 번역", 10, 10);

}