Canvas Drawing

Canvas Drawing

 

• getContext()
  - 드로잉을 위한 속성과 메소드를 적용할 수 있도록 HTML 오브젝트를 생성하는 Canvas의 메소드
• fillRect(x,y,width,height)
  - x와 y는 사각형의 좌측 상단 좌표이고 width와 height는 사각형의 가로와 세로 픽셀 사이즈이다.
  

  const canvas1 = document.getElementById('canvas1');
  const ctx1 = canvas1.getContext('2d');
  ctx1.fillRect(150,100,300,200);​

• moveTo(x,y)
  - 라인의 시작 좌표를 지정하는 Canvas 메소드
• lineTo(x,y)
  - 라인의 종료 좌표를 지정하는 Canvas 메소드
• stroke( )
  - 정의한 패스를 그리도록 명령하는 Canvas 메소드
• fill( )
  - 정의한 패스의 면을 채우도록 명령하는 Canvas 메소드
  

  const canvas3 = document.getElementById('canvas3');
  const ctx3 = canvas3.getContext('2d');
  ctx3.moveTo(300,50); ctx3.lineTo(50,350); ctx3.lineTo(550,350); ctx3.lineTo(300,50);
  // ctx3.stroke(); -> 확인하기 위해서
  ctx3.fillStyle = 'coral';
  ctx3.fill();​