주석 : HTML5 Canvas는 구현할 수있는 그래픽 API를 제공하며,이를 통해 번역, 회전, 스케일링 등을 실현할 수 있습니다. 번역, 회전, 스케일링 및 참조 사진의 특정 구현을 공유하겠습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
HTML5 캔버스는 그래프 변환, 회전 및 스케일링을 구현하기위한 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);
}