DOM Canvas 다각형 그리기

황제낙엽 2016.08.22 07:04 조회 수 : 111

sitelink1 http://blog.naver.com/shadowbug/220741277430 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

선과 삼각형, 다각형들을 그리기 위해서는 Path를 이용하여 그려야한다.

 

주요 Path 함수

 

 설명

 beginPath()

 패스를 연다.

 closePath()

 패스를 닫는다.

 이 함수를 사용할 경우, moveTo로 설정한 점으로 연결을 시킨다.

 처음 점과 연결하여 닫기 싫을 경우 사용하지 않으면 된다.

 moveTo(x, y)

 그리기의 시작 지점을 설정한다.

 lineTo(x, y)

 선이 그려지는 끝 부분을 설정한다.

 계속 호출할 경우 moveTo가 이전 lineTo로 호출되며 

선이 계속 이어진 것과 같은 효과가 난다.

 

 

javascript

  1. function draw(target) {

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

  3.  

  4.     // 지원 여부 체크

  5.     if (canvas.getContext) {

  6.         // HTML5에서 canvas를 지원시

  7.  

  8.         // 그리기 오브젝트를 받음

  9.         var ctx = canvas.getContext('2d');

  10.  

  11.         ctx.beginPath();

  12.         ctx.moveTo(75, 50);

  13.         ctx.lineTo(100, 75);

  14.         ctx.lineTo(100, 25);

  15.         ctx.closePath();

  16.         ctx.fill();

  17.     }

  18. }

결과

스크린샷_2016-06-20_오후_5.13.52.png