canvas API - Path2D objects

코드를 단순화하고, 성능을 향상시키기 위하여 최근 버전의 브라우저에서 사용할 수 있는
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.addPath(path [, transform])
  -> 옵션으로 변환 행렬(transformation matrix)을 사용해 현재 경로에 경로를 추가한다.

  ex)

    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);
  
        var circle = new Path2D();
        circle.moveTo(125, 35);
        circle.arc(100, 35, 25, 0, 2 * Math.PI);
  
        ctx.stroke(rectangle);
        ctx.fill(circle);
      }
    }
    

  결과물인 두 도형은 모두 Path2D object로 저장될 것이다.