Path

Path

 

• fill()
  - 정의한 패스 면을 채우는 메소드
  - fillStyle 속성으로 색상, 그라디언트, 패턴을 정의할 수 있다.
  - 지정한 패스가 닫혀있지 않을 경우 fill() 메소드가 마지막 점과 시작점을 이어서 닫힌 패스로 만든 후 면을 채운다.
  - 기본값 #000000
  

  const canvas15 = document.getElementById('canvas15');
  const ctx15 = canvas15.getContext('2d');
  ctx15.beginPath();
  ctx15.rect(50,50,300,200);
  ctx15.fillStyle = gra1;
  ctx15.fill();
  
  ctx15.beginPath();
  ctx15.moveTo(250,150);ctx15.lineTo(500,150);ctx15.lineTo(300,350);
  ctx15.fillStyle = gra2;
  ctx15.fill();​

• stroke()
  - 정의한 패스를 선의 형태로 그리는 메소드
  - fillStyle 속성으로 색상, 그라디언트, 패턴을 정의할 수 있다.
  - 기본값 #000000
• beginPath()
  - 패스를 시작하거나 최근 패스를 초기화하고자 할 때 사용하는 메소드
  - moveTo(), lineTo(), ... 메소드를 새로 생성할 때도 사용한다.
• moveTo(x,y)
  - 명시된 위치로 선의 생성 없이 패스의 점을 이동시키는 메소드
• lineTo(x,y)
  - 마지막 점으로부터 지정한 점으로 새로운 라인을 지정하는 메소드
• closePath()
  - 현재까지 그린 패스의 끝점과 첫 점을 이어서 닫힌 패스로 만드는 메소드
  

  const canvas16 = document.getElementById('canvas16');
  const ctx16 = canvas16.getContext('2d');
  ctx16.lineWidth=8;ctx16.lineCap='round';ctx16.lineJoin='round';
  ctx16.setLineDash([15]);
  
  ctx16.beginPath();
  ctx16.moveTo(50,50);ctx16.lineTo(50,350);ctx16.lineTo(250,350);
  ctx16.strokeStyle = 'coral';
  ctx16.stroke();
  
  ctx16.beginPath();
  ctx16.moveTo(350,50);ctx16.lineTo(350,350);ctx16.lineTo(550,350);
  ctx16.closePath();
  ctx16.strokeStyle = 'cornflowerblue';
  ctx16.stroke();​

• clip()
  - 하위 도형을 clip() 적용된 도형에 귀속시키는 메소드
  - 한번 clip()된 영역의 이후 모든 도형은 크리핑 영역에 포함된다.
  

  ctx17.moveTo(300,50);ctx17.lineTo(50,350);ctx17.lineTo(550,350);
  ctx17.closePath();
  ctx17.stroke();
  ctx17.clip();
  
  ctx17.globalAlpha = .5;
  ctx17.fillStyle  = gra3;
  ctx17.fillRect(0,0,600,200);
  ctx17.fillStyle= myPat1;
  ctx17.fillRect(0,200,600,200);​

   
• quadraticCurveTo(cpx,cpy,x,y)
  - 2차 베지에 곡선을 드로잉하는 메소드
  - 2개의 점이 필요하다.
  - 첫 번째 점은 조절점(Control Point)이고, 마지막 점은 곡선의 끝점이다.
  - 곡선의 시작점은 현재 경로의 마지막 점이다.
  - 경로가 존재하지 않으면 beginPath()나 moveTo() 메소드를 사용하여 시작점을 정의해야 한다.
  

  const canvas19 = document.getElementById('canvas19');
  const ctx19 = canvas19.getContext('2d');
  ctx19.beginPath();
  ctx19.moveTo(50,100);ctx19.lineTo(150,100);
  ctx19.quadraticCurveTo(350,350,450,100);ctx19.lineTo(550,100);
  ctx19.lineTo(550,350);ctx19.lineTo(50,350);
  ctx19.closePath();
  ctx19.lineWidth=5;ctx19.lineJoin='round';ctx19.lineCap='round';
  ctx19.setLineDash([10]);
  ctx19.strokeStyle = gra2;
  ctx19.stroke();​

• bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
  - 3차 베지에 곡선을 드로잉하는 메소드
  - 3개의 점이 필요하다.
  - 처음 2개의 점은 조절점(Control Point)이고, 마지막 점은 곡선의 끝점이다.
  - 곡선의 시작점은 현재 경로의 마지막 점이다.
  - 경로가 존재하지 않으면 beginPath()나 moveTo() 메소드를 사용하여 시작점을 정의해야 한다.
  

  const canvas20 = document.getElementById('canvas20');
  const ctx20 = canvas20.getContext('2d');
  ctx20.beginPath();
  ctx20.moveTo(50,100);
  ctx20.bezierCurveTo(50,450,550,450,550,100);
  ctx20.bezierCurveTo(550,250,50,250,50,100);
  ctx20.fillStyle = gra2;
  ctx20.fill();​

• arc(x,y,r,sAngle,eAngle,counterclockwise)
  - 원이나 원을 기반으로 한 곡선인 원호를 드로잉하는 메소드
  - 원을 그리기 위해서는 시작 각도에 0을, 종료 각도에 2*Math.PI를 지정한다.
  - arc의 원의 각도 0은 3시의 위치이다.
  - 종료 각도 뒤에 시계 방향 드로잉 여부를 추가로 지정할 수 있다.
  - counterclockwise의 기본 값은 false으로서 시계방향으로 그려지면, true로 지정할 경우 반시계 방향으로 그려진다.
  - 부채꼴을 그리는 경우 moveTo(x,y) 경로와 arc()의 중심 좌표를 동일하게 한 후 그려준 후 closePath()로 시작점을 이어 그린다.
  

  const canvas22 = document.getElementById('canvas22');
  const ctx22 = canvas22.getContext('2d');
  ctx22.beginPath();
  ctx22.arc(300,200,100,0,Math.PI*1.5);
  ctx22.stroke();
  
  // 부채꼴
  const canvas23 = document.getElementById('canvas23');
  const ctx23 = canvas23.getContext('2d');
  ctx23.beginPath();
  ctx23.moveTo(300,200);
  ctx23.arc(300,200,100,0,Math.PI*1.5,true);
  ctx23.closePath();
  ctx23.stroke();​

• arcTo(x1,y1,x2,y2,r)
  - 두 개의 점 사이를 잇는 곡선을 드로잉하는 메소드
  

  

  const canvas25 = document.getElementById('canvas25');
  const ctx25 = canvas25.getContext('2d');
  ctx25.beginPath();
  ctx25.moveTo(150,100);
  ctx25.lineTo(450,100);ctx25.arcTo(500,100,500,150,50);
  ctx25.lineTo(500,250);ctx25.arcTo(500,300,450,300,50);
  ctx25.lineTo(150,300);ctx25.arcTo(100,300,100,250,50);
  ctx25.lineTo(100,150);ctx25.arcTo(100,100,150,100,50);
  ctx25.lineWidth=50;ctx25.strokeStyle=gra21;
  ctx25.stroke();​

• isPointInPath(x,y)
  - 지정된 경로에 존재하는 점인 true, 그렇지 않은 경우 false를 반환하는 메소드
  

  const canvas26 = document.getElementById('canvas26');
  const ctx26 = canvas26.getContext('2d');
  ctx26.rect(100,100,400,200);
  ctx26.strokeStyle = gra2;ctx26.lineWidth=50;ctx26.lineJoin='round';
  if(ctx26.isPointInPath(150,150)){
      ctx26.stroke();
  }​

• 반복문을 활용한 도형 그리기
  

  const canvas27 = document.getElementById('canvas27');
  const ctx27 = canvas27.getContext('2d');
  const w27 = canvas27.width;
  const h27 = canvas27.height;
  
  ctx27.fillStyle='#153B40';ctx27.fillRect(0,0,w27/2,h27/2);
  ctx27.fillStyle='#1E5359';ctx27.fillRect(w27/2,0,w27/2,h27/2);
  ctx27.fillStyle='#77A1A6';ctx27.fillRect(0,h27/2,w27/2,h27/2);
  ctx27.fillStyle='#8C4E03';ctx27.fillRect(w27/2,h27/2,w27/2,h27/2);
  
  ctx27.fillStyle='#fff';ctx27.globalAlpha=0.2;
  for(let i=1;i<7;i++){
      ctx27.beginPath();
      ctx27.arc(w27/2,h27/2,30*i,0,Math.PI*2);
      ctx27.fill();
  }
  
  const canvas28 = document.getElementById('canvas28');
  const ctx28 = canvas28.getContext('2d');
  
  ctx28.lineCap='round';ctx28.strokeStyle=gra3;
  for(let i=0;i<10;i++){
      ctx28.lineWidth=2+i;ctx28.setLineDash([i*6]);
      ctx28.beginPath();
      ctx28.moveTo(100+i*50,50);
      ctx28.lineTo(50+i*50,350);
      ctx28.stroke();
  }