EverGiver

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

Styles and Shadow fillStyle - 색상, 그라디언트, 패턴으로 면을 지정하는 속성 - 기본값 #000000 strokeStyle - 색상, 그라디언트, 패턴으로 선을 지정하는 속성 - 기본값 #000000 shadowColor - 그림자 색상을 지정하는 속성 - shadowBlur나 shadowOffset과 함께 사용 shadowBlur - 그림자의 흐름을 지정하는 속성 - shadowColor와 함께 사용 - 기본값 #000000 shadowOffsetX / shadowOffsetY - 도형으로부터 그림자와의 거리를 지정하는 속성 - shadowColor와 함께 사용 - 기본값 0 const canvas4 = document.getElementById('canvas4'); const..

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( ) - 정의한 패스를..