도형 그리기 2

* 패스를 사용한 그리기

- 패스란, 점과 점을 연결한 선을 말함.

 

* 그리기 흐름

 

 

- 패스로 그리는 방법은 조금 복잡함.

- 패스는 stroke()나 fill()로 그리지 않는 한 표시되지 않음.

 

[패스의 메서드]

 

메서드	기능
beginPath();	패스 그리기를 시작함.  그때까지 그렸던 패스는 모두 리셋됨.
moveTo(x, y);	패스 그리기의 시작점 좌표를 저장함.  x와 y좌표를 설정함.
lineTo(x, y);	패스 그리기의 끝점을 설정함.  x와 y좌표를 설정함.  lineTo() 메서드로 좌표를 계속해서 그으면 복잡한 도형을 그릴 수 있음.
stroke();	패스의 선을 그림.  strokeStyle 프로퍼티로 색이나 스타일을 지정할 수 있음.
fill();	패스를 둘러싸인 부분을 칠함.  패스가 한 변밖에 없는 경우는 칠하지 않음.  fillStyle 프로퍼티로 색이나 스타일을 지정할 수 있음.
closePath();	패스의 시작점과 끝점이 일치하지 않는 경우, 자동으로 패스의 시작점과 끝점을 연결함.
rect(x, y, w, h);	사각형 패스를 그림.  좌표의 설정 방법은 strokeRect() 메서드와 똑같음.

 

- 예)

 

<script>
function draw() {
    var canvas = document.getElementById("canvas1");
    if(canvas.getContext) {
        var cvs = canvas.getContext("2d");
        cvs.beginPath();
        cvs.moveTo(150,20);
        cvs.lineTo(130,120);
        cvs.lineTo(220,60);
        cvs.lineTo(190,40);
        cvs.lineTo(130,120);
        cvs.lineTo(180,30);
        cvs.closePath();
        cvs.fillStyle="#ee8888";
        cvs.fill();
    }
}
</script>

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)