EverGiver

Transformations scale(scalewidth, scaleheight) - 현재 드로잉의 좌표 공간을 수평/수직 방향으로 확대/축소하는 메소드 - scalewidth/scaleheight 수치는 1을 100%로 하여 배율로 지정한다. - 이미 scale()이 적용되었을 경우 이후의 모든 드로잉에 동일한 비율로 적용이 된다. - scale 메서드를 연속하여 사용할 경우 초기값 기준이 아닌, 전에 정의한 좌표 공간의 값 기준으로 중첩되어 사용된다. - 음수값을 사용하면 진행 방향이 반대로 그려진다. const canvas30 = document.getElementById('canvas30'); const ctx30 = canvas30.getContext('2d'); ctx30.strokeRect..

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)..

Rectangles rect(x,y,width,height) - 사각형을 드로잉 하는 메소드 - fill()이나 stroke() 메소드로 실행하여야 드로잉된다. fillRect(x,y,width,height) - fill() 실행이 적용된 사각형을 드로잉하는 메소드 strokeRect(x,y,width,height) - stroke() 실행이 적용된 사각형 드로잉하는 메소드 - 면은 채워지지 않는다. clearRect(x,y,width,height) - 지정된 사각형 영역을 삭제하는 메소드 const canvas14 = document.getElementById('canvas14'); const ctx14 = canvas14.getContext('2d'); ctx14.fillStyle = gra3; ct..

Line Style lineWidth - 패스 선 두께를 지정하는 속성 - 숫자만 입력하며 px로 적용 - 기본값 1px lineCap - 선의 가장자리 스타일을 지정하는 속성 - 값 : butt (기본) / round / square const canvas12 = document.getElementById('canvas12'); const ctx12 = canvas12.getContext('2d'); ctx12.lineWidth=10;ctx12.strokeStyle='coral'; ctx12.beginPath(); ctx12.lineCap = 'butt'; ctx12.moveTo(50,100);ctx12.lineTo(550,100); ctx12.stroke(); ctx12.beginPath(); ctx..

Pattern createPattern(image,repeat) - 이미지, 비디오, 다른 캔버스 요소를 참조하여 패턴으로 반복시키는 메소드 - repeat 값은 css의 background-repeat 속성의 값과 동일하다. const canvas9 = document.getElementById('canvas9'); const ctx9 = canvas9.getContext('2d'); const patImg1 = document.getElementById('pat1'); const myPat1 = ctx9.createPattern(patImg1, 'repeat'); ctx9.fillStyle = myPat1; ctx9.fillRect(150,100,300,200); const canvas10 = doc..

Gradients 사각형, 원형, 라인, 텍스트 등 Canvas에 단색을 적용할 수 있는 곳에는 모두 적용할 수 있으며 fillStyle이나 strokeStyle 속성으로 지정한다. 그라디언트를 지정할 때는 반드시 두 개 이상의 색상점(Color Stop)을 지정해야 한다. addColorStop(stop,color) - 그라디언트에 색상점(Color Stop)을 지정하는 메소드 - stop은 0에서 1까지의 숫자로 지정한다. createLinearGradient(x0,y0,x1,y1) - 선형 그라디언트를 지정하는 메소드 - addColorStop()과 함께 사용 - x0와 y0는 그라디언트의 시작 지점 좌표를, x1와 y1는 그라디언트의 종료 지점 좌표를 지정한다. const canvas7 = doc..