HTML <canvas> Path2D 오브젝트 (Path2D objects)

1. Path2D 오브젝트 (Path2D objects)

캔버스를 사용할 때, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다.

코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수 잇는 Path2D 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이는 경로를 빠르게 다시 실행 시킬 수 있습니다.

 

Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.

 

new Path2D();     // empty path object
new Path2D(path); // copy from another Path2D object
new Path2D(d);    // path from SVG path data

 

moveTo, rect, arc 혹은 quadraticCurveTo 등과 같은 모든 경로 메소드들은 Path2D 객체에서 사용 가능합니다.

 

Path2D API는 또한 addPath 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용될 수 있습니다.

 

Path2D.addPath(path [, transform]);

 

옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.

 

 

 

2. Path2D 예제

function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        var rectangle = new Path2D();
        rectangle.rect(10, 10, 50, 50);
        rectangle.rect(10, 100, 50, 50);

        var circle = new Path2D();
        circle.moveTo(125, 35);
        circle.arc(100, 35, 25, 0, 2 * Math.PI);
        circle.arc(100, 125, 25, 0, 2 * Math.PI);

        ctx.stroke(rectangle);
        ctx.fill(circle);
      }
    }

 

결과 화면

 

직사각형과 원을 만들었습니다.

나중에 사용할 것을 고려하여, 두 도형 모두 Path2D object로 저장 될 것입니다. 새로운 버전의 Path2D API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 Path2D object를 옵션으로 선택하여 사용할 수 있도록 업데이트 되었습니다. 예제에서는 stroke 와 fill 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.

 

 

3. SVG paths 사용하기

Path2D API 의 또 다른 특징 중 하나는, 캔버스의 path(경로)를 초기화 하기 위해 SVG path data 를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG 와 canvas 에서 재사용할 수 있도록 해줍니다.

 

function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        var p = new Path2D('M10 10 h 80 v 80 h -80 Z');

        ctx.stroke(p);
      }
    }

 

결과 화면

 

위의 예제의 path 는 (M10 10) 지점으로 이동한 다음, 수평하게 오른쪽으로 80 (h 80) 만큼 이동합니다. 이후 수직으로 80 (v 80) 내려간 다음, 왼쪽으로 80 (h -80) 수평하게 이동하고 다시 시작점 (z) 으로 돌아갑니다.

 

 

 

 

 

**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial