HTML5 Canvas_html5 튜토리얼 기술에서 그래픽 행렬 변환을 제어하는 ​​방법에 대한 심층 분석

행렬 변환 변환()을 소개하기 전에 변환 행렬이 무엇인지부터 알아보겠습니다.

위는 Canvas의 변환() 메소드에 해당하는 변환 행렬입니다. 이 메서드는 그림에 표시된 6개의 매개변수, 특히 context.transform(a,b,c,d,e,f)를 전달합니다.

각 매개변수의 의미는 다음 표와 같습니다.

参数	意义
a	水平缩放（1）
b	水平倾斜（0）
c	垂直倾斜（0）
d	垂直缩放（1）
e	水平位移（0）
f	垂直位移（0）

해당 0 또는 1을 행렬에 대입하면 이것이 단위 행렬임을 알 수 있습니다(가로 및 세로 스케일링의 기본값은 1이며, 이는 1배로 스케일링, 즉 스케일링이 없음을 의미함). 이 방법은 새로운 변화행렬을 이용하여 현재의 변환행렬을 곱하여 다양한 변화효과를 얻는 방법이다.

간단히 말하면, 그래픽을 변환하려면 변환 행렬의 해당 매개변수만 연산하면 됩니다. 연산 후 그래픽의 각 고정점 좌표에 이 행렬을 곱하면 새로운 결과를 얻을 수 있습니다. 고정점의 좌표입니다.

transform() 메소드

캔버스 드로잉은 이러한 변환 행렬을 변경하는 방법, 즉 변환()을 제공합니다.

기본 좌표계는 캔버스의 왼쪽 상단을 좌표 원점(0, 0)으로 합니다. X축 값이 오른쪽으로 갈수록 값이 커지고, Y축 값이 아래로 갈수록 값이 커집니다. 기본 좌표계에서는 각 점의 좌표가 CSS 픽셀에 직접 매핑됩니다. 캔버스의 일부 특정 작업 및 속성 설정은 기본 좌표계를 사용합니다. 그러나 기본 좌표계 외에도 각 캔버스에는 그래픽 상태의 일부로 "현재 변환 행렬"도 있습니다. 이 행렬은 캔버스의 현재 좌표계를 정의합니다. 점의 좌표가 지정되면 캔버스에 대한 대부분의 작업은 기본 좌표계가 아닌 현재 좌표계에 점을 매핑합니다. 현재 변환 행렬은 지정된 좌표를 기본 좌표계의 동등한 좌표로 변환하는 데 사용됩니다. 좌표 변환은 텍스트 및 선분 그리기에도 영향을 미칩니다.

translate() 메소드를 호출하면 좌표 원점이 위, 아래, 왼쪽, 오른쪽으로 이동됩니다.
rotate() 메서드는 지정된 각도에 따라 좌표축을 시계 방향으로 회전합니다.
scale() 메소드는 x축 또는 y축 기준으로 거리를 늘리거나 줄이는 기능을 구현합니다. 음수 값을 전달하면 좌표 원점을 기준점으로 사용하여 좌표축을 뒤집는

배율이 달성됩니다. 거울에 비친 모습처럼.
translate를 사용하여 좌표 원점을 캔버스의 왼쪽 하단으로 이동시킨 후 scale 방식을 사용하여 y축을 뒤집어 y축이 위로 올라갈수록 커지도록 합니다.

수학적 관점에서 좌표계 변환 이해:
이동, 회전 및 크기 조정 방법을 좌표축의 변환으로 상상하면 이해하기 쉽습니다. 좌표변환을 대수학적 관점에서 이해하기 쉽다. 즉 변환을 변환된 좌표계의 점 (x, y)로 상상하면 원래의 좌표계는 (x`, y`)가 된다.
c.translate(dx,dy)를 호출합니다. 해당 메소드는 다음 표현식

과 동일합니다.

코드 복사

코드는 다음과 같습니다.

x` = x dx; //new 시스템의 x축 0은 dx
y` = y dy;
c.scale(sx,sy);
x` = sx*x;
y입니다. ` = 원래 시스템에서는 sy*y;
c.rotate()
x` =x*cos(a)-y*sin(a);
y` = y*cos(a) x*sin(a) ;

다음 상황에서는 변환()을 사용하는 것이 좋습니다.

1. context.translate(dx,dy) 대신 context.transform(1,0,0,1,dx,dy)을 사용하세요
2. context.transform(sx,0,0,sy, context.scale(sx,sy)
대신 0 ,0) 3. 기울기 효과를 얻으려면 context.transform(0,b,c,0,0,0)을 사용하세요(가장 실용적).
회전을 달성하기 위해 이를 사용할 필요도 없으며, abcdef의 6개 매개변수의 의미만 적어 두어도 됩니다.

익숙해지도록 코드를 살펴보겠습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

  

    window.onload = 함수(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        context.fillStyle = "노란색";   

        context.StrokeStyle = "#00AAAA";   

        context.lineWidth = 5;   

  

        context.save();   

        //平移至(300,200)   

        context.transform(1,0,0,1,300,200);   

        //water平方向放大2倍，垂直方向放大1.5倍   

        context.transform(2,0,0,1.5,0,0);   

        //南平方向向右倾斜宽道10%적距离，垂直方向向上倾斜高價10%적距离   

        context.transform(1,-0.1,0.1,1,0,0);   

        context.fillRect(0,0,200,200);   

        context.StrokeRect(0,0,200,200);   

        context.restore();   

    };