EverGiver

Canvas Basic Animation Canvas 기본 애니메이션 단계 1. 캔버스를 비운다. 2. 캔버스 상태를 저장한다. 3. 애니메이션 할 도형을 드로잉 한다. 4. 캔버스 상태를 복원한다. requestAnimationFrame() - 브라우저에게 수행하기를 원하는 애니메이션을 알리고 해당 애니메이션을 업데이트하는 자바스크립트 함수 - 시간 값을 인자로 받을 수 있고, 모니터 주사율에 맞춰서 애니메이션을 실행해주기 때문에 최근 애니메이션에 가장 많이 사용하는 함수이다. - setTimeout : 일정 시간이 지나면 해당 함수를 실행, 재귀 호출을 사용해서 반복 - setInterval : 일정 시간마다 해당 함수를 실행 - requestAnimation : 브라우저에게 애니메이션을 실행하도록 ..

Canvas Images drawImage(img,x,y) - 원본 이미지의 원래 크기대로 캔버스의 지정된 위치에 삽입하는 메소드 - 이미지, 다른 캔버스, 동영상을 삽입할 수 있다. - 이미지를 삽입하기 전에 해당 이미지가 로딩되어야 이미지를 삽입할 수 있다. const canvas43 = document.getElementById('canvas43'); const ctx43 = canvas43.getContext('2d'); const img1 = document.getElementById('smile1'); ctx43.drawImage(img1,50,50); const canvas44 = document.getElementById('canvas44'); const ctx44 = canvas44.ge..

Canvas Text fillText(text,x,y) - 색상이 채워져 있는 텍스트를 작성하는 메소드 - x와 y는 텍스트의 x와 y 좌표이고 fillStyle 속성으로 기본 값은 #000000 이다. font - 글자의 속성을 지정하는 속성 - 기본 값은 10px sans-serif이고 사용 방법은 css의 font 속성과 거의 동일하다. const canvas37 = document.getElementById('canvas37'); const ctx37 = canvas37.getContext('2d'); ctx37.font = 'bold 7em Arial,sans-serif'; ctx37.fillStyle=gra3; ctx37.fillText('Canvas',100,240);​ strokeText(..

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