HTML <canvas> setLineDash, lineDashOffset - 선의 대시 패턴 지정하기

1. setLineDash, lineDashOffset

setLineDash 메소드와 lineDashOffset 속성은 선의 대시 패턴을 지정합니다.

setLineDash 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 lineDashOffset 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.

 

 

 

2. 예제

var ctx = document.getElementById('canvas').getContext('2d');
    var offset = 0;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.setLineDash([40, 20]);
      ctx.lineDashOffset = -offset;
      ctx.strokeRect(50, 50, 500, 500);
    }

    function march() {
      offset++;
      if (offset > 16) {
        offset = 0;
      }
      draw();
      setTimeout(march, 20);
    }

    march();

 

결과 화면

 

이 예제는 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수 있는 애니메이션 기술입니다. 테두리를 애니메이션화 하였습니다.