HTML5 캔버스 변환

HTML5 캔버스 변환 메서드, HTML을 사용하여 변환을 사용하는 온라인 예제5 캔버스를 회전, 이동, 확대, 다른 점에서 회전, 확대 비율 설정 등으로 변환할 수 있습니다.

변환을 HTML에 적용할 수 있습니다5캔버스에 그려진 모든 내용. 적용할 수 있는 변환 목록은 다음과 같습니다:

• 이동(그려진 내용을 이동)

• 회전

• 확대

이 문서에서는 모든 이러한 변환을 소개합니다

변환 행렬

다음과 같은 곳에서 사용할 수 있습니다:2D 상태에서 변환 행렬을 설정합니다. 이 행렬은 캔버스에 그려진 모든 내용에 곱됩니다. 이 튜토리얼에서 사용하는 예제에서는 '식별' 행렬을 설정했습니다. 이 행렬은 x, y 좌표 집합을 곱하여 x, y를 얻습니다. 다시 말해, 어떤 변환도 수행하지 않습니다.
이는 변환 행렬을 단위 행렬로 설정하는 방법입니다:

context.setTransform(1, 0, 0,　1, 0, 0);

이동

이동은 캔버스에 그려진 모든 내용에 적용할 수 있습니다. 이동은 그린 내용의 재위치를 의미합니다. 이는 코드에서 이동을 설정하는 방법입니다:

var x =　100;
var y =　　50;
context.translate(x,　y);

이 예제에서는 x축에서 이동하는 모든 형을 캔버스에 그립니다100, y축에서 이동50.
주의: 이동은 translate() 함수 호출 후 그린 모든 형에만 적용됩니다. 이 함수 호출 전에 그린 형은 영향을 받지 않습니다.
이는 또 다른 예제입니다. 동일한 좌표에 두 개의 직사각형을 그렸지만, translate() 함수 호출 전에 그린 직사각형과 호출 후에 그린 직사각형을 그렸습니다.

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　=　"#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle　=　"#0000ff";
context.fillRect(10,10,　100,　100);
</script>

캔버스에 그리는 때의 결과는 다음과 같습니다:

회전

자동 회전을 HTML5캔버스에 그려진 모든 형. 이는 rotate()2D 컨텍스트의 기능이 완료되었습니다. 이는 간단한 예제입니다:

context.rotate(radians);

회전 각도는 rotate() 함수에 전달되는 매개변수로 회전 각도를 전달합니다. 이 값은 도 단위가 아니라弧도 단위로 전달되어야 합니다.
회전 후 그린 모든 형은 캔버스 상의 0,0 점을 중심으로 회전합니다. 이는 캔버스의 왼쪽 상단 모서리입니다.
이동과 마찬가지로, 회전은 rotate() 함수 호출 후 그린 모든 형에만 적용됩니다.
회전 전후로 동일한 직사각형을 그리는 예제입니다:

<canvas id="ex2" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
　var　canvas　　=　document.getElementById("ex2");
var　context　=　canvas.getContext("2d");
　context.fillStyle　=　"#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
　context.fillStyle　=　"#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

캔버스에 직사각형을 그리는 때의 모습은 다음과 같습니다:

다른 점을 중심으로 회전

먼저 언급했듯이, 모든 형은 캔버스(0,0)의 왼쪽 상단 모서리를 중심으로 회전합니다. 하지만 다른 점을 중심으로 회전하려면 어떻게 해야 하나요? 예를 들어, 자신의 중심을 중심으로 회전하는 형이 되겠습니다?
자신의 중심을 중심으로 회전하려면, 먼저 캔버스를 형의 중심으로 이동해야 하며, 그런 다음 캔버스를 회전하고, 그런 다음 캔버스를 0,0으로 이동시키고, 그런 다음 형을 그립니다.
이는 블루 렉시angle형이 중심을 중심으로 회전하는 코드 예제입니다:

<canvas id="ex3" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex3");
var　context　=　canvas.getContext("2d");
var　x　　　　　　=　10;
var　y　　　　　　=　10;
var　width　　=　100;
var　height　=　100
var cx = x　+　0.5　*　width;
var cy = y　+　0.5　*　height;
context.fillStyle　=　"#ff0000";
context.fillRect(x,　y,　width,　height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
context.translate(-cx,　-cy);　//set center back to 0,0
context.fillStyle　=　"#0000ff";
context.fillRect(x,　y,　width,　height);
</script>

캔버스에 그리는 때의 모습은 다음과 같습니다:

이 예제에서는 먼저 캔버스의 중심을 정方形의 중심으로 이동합니다 (cx, cy). 그런 다음 캔버스를 회전25도. 그런 다음, 캔버스를 다시 0,0으로 변환합니다. 지금은, 캔버스가 cx, cy를 중심으로 회전했습니다.25도. 그리신 모든 내용은 cx, cy를 중심으로 회전되어 표시됩니다. 결국, 사각형은 무슨 일도 없는 것처럼 그려지지만, 지금은 cx, cy를 중심으로 회전됩니다.25도. 이는 전환 호출만으로도 구현할 수 있습니다. 사각형의 좌표는 변하지 않습니다. context.fillRect()를 주의하세요, 빨간색과 파란색 사각형을 그리는 두 번의 호출은 어떻게 같은지. 그들은 간격과 회전 위치가 다른 위치에 나타나게 하는 전환 호출입니다

확대

HTML5캔버스에 그린 모든 형태에 자동 확대가 적용됩니다.
확대할 때, x축과 y축의 모든 좌표를 확대할 수 있는 특정 요인을 사용할 수 있습니다. 이러한 요인을 설정할 수 있는 scale() 함수를 다음과 같이 사용할 수 있습니다:

var　scaleX　=　2;
var　scaleY　=　2;
context.scale(scaleX,　scaleY);

이 예제에서는 x축과 y축의 모든 좌표를 확대합니다2배.
translate()와 rotate()와 마찬가지로, 확대 비율은 scale() 호출 후 그린 형태에만 적용됩니다.
이는 또 다른 빨간색과 파란색 사각형을 그리는 코드 예제로, 확대 비율은 파란 사각형에 적용됩니다:

<canvas id="ex5" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex5");
var　context　=　canvas.getContext("2d");
var　x　　　　　　=　10;
var　y　　　　　　=　10;
var　width　　=　100;
var　height　=　100
context.fillStyle　=　"#ff0000";
context.fillRect(x,　y,　width,　height);
context.scale(2,2);
context.fillStyle　=　"#0000ff";
context.fillRect(x,　y,　width,　height);
</script>

캔버스에 생성된 그래픽스:

주의하세요, 파란 사각형의 크기는 빨간 사각형의 두 배입니다.
또한 주의해야 할 것은, 파란 사각형의 왼쪽 상단에서 캔버스의 왼쪽 상단(0,0)까지의 거리도 두 배입니다. 모든 좌표가 두 배로 축소되었으며, 사각형의 왼쪽 상단 좌표도 마찬가지입니다. 확대할 때 형태가 이동하지 않도록 하려면 확대와 이동을 결합해야 합니다.

缩放比例

확대 비율4확대 기능을 사용하여 비율 확대 기능을 구현할 수 있습니다. 아래 캔버스에는

Canvas 지원하지 않음

확대 정도:1에 대한 확대 수준이 있는 텍스트 필드가 보이면, 다음 값 사이에 입력하세요:10으로

확대 수준 사이의 차이를 확인한 후, 텍스트 필드에서 나가서 결과를 확인하세요. 슬라이더가 보이면, 슬라이더를 이동하면 됩니다.

이동, 회전 및 확대 조합2물론 모든 세 가지 변환을 동일한 캔버스에 조합할 수 있습니다. 하지만, 회전과 이동을 조합할 때와 마찬가지로,