214_자바스크립트에서 시간 주기 작업하기 [적용] 주기적으로 작업을 처리하고 싶을 때 애니메이션 관련 함수를 호출하고 싶을 때 [문법] 메소드 의미 반환 setInterval( 함수, 밀리초) 지정 시간 간격으로 연속 함수 호출 숫자 [내용] setInterval()을 사용해 지정 밀리초 간격으로 함수를 실행할 수 있다. setTimeout()은 함수를 한 번만 호출하지만, setInterval()은 지정 시간 간격으로 연속 실행한다. JavaScript main.js setInterval(timer1, 1000); // 1000밀리초 간격으로 실행 function timer1() { // 처리 작업 } 첫 번째 인수는 함수, 두 번째 인수는 반복 간격(밀리초 단위)을 전달하며, 함수는 익명 함수(An..

213_자바스크립트에서 지정 시간 후 작업 실행 해제하기 [적용] setTimeout() 처리를 해제하고 싶을 때 [문법] 메소드 의미 반환 clearTimeout(타이머ID) setTimeout() 호출 해제 없음 [내용] clearTimeout()을 사용해 setTimeout()으로 지정한 함수의 실행을 취소할 수 있다. 해제하고 싶은 타이밍에 맞춰 setTimeout()의 반환값인 타이머 ID(숫자 타입)를 clearTimeout()의 인수로 전달하면 지정한 함수의 호출이 해제된다. JavaScript main.js const timerId = setTimeout(timer1, 1000); // 1000밀리초 후 실행 function timer1() { // 처리 작업 } clearTimeout(t..

212_자바스크립트에서 지정 시간 후 작업 실행하기 [적용] 작업의 처리를 지연시키고 싶을 때 비표시 요소를 지정 시간 경과 후 표시하고 싶을 때 [문법] 메소드 의미 반환 setTimeout(함수, 밀리초) 지정 시간에 함수 호출 숫자 [내용] setTimeout()을 사용해 지정 시간(밀리초 단위) 후 함수를 실행할 수 있다. 자바스크립트는 스크립트의 코드를 위에서부터 순서대로 실행하지만, setTimeout()을 사용해 실행 타이밍과 순서의 지정이 가능하다. setTimeout()은 한 번만 호출되며, 첫 번째 인수는 함수, 두번째 인수는 지연 시간을 밀리초(1/1000초) 단위로 전달한다. JavaScript main.js setTimeout(timer1, 1000); // 1000밀리초 후 실행..

211_자바스크립트에서 캔버스 그래픽 다운로드하기 [적용] 브라우저에서 생성한 도형을 유저의 시스템에 다운로드하고 싶을 때 브라우저에서 가공한 이미지를 유저의 시스템에 다운로드하고 싶을 때 [문법] 메소드 의미 반환 new Blob(배열, 옵션) Blob 객체 생성 Blob 객체 [내용] a 요소를 사용해 캔버스 요소에서 작업한 그래픽을 다운로드 할 수 있다. 이미지 데이터는 toDataURL()을 사용해 Base64 문자열로 가져오며, 바이너리이므로 Blob 객체로 변환한다. JavaScript (부분) main.js // 캔버스 요소 참조 const canvas2 = document.querySelector('#cnavas-effected'); // 파일 형식과 파일명 지정 const mimeType..

210_자바스크립트에서 PNG/JPEG DataURL로 불러오기 [적용] DataURL로 PNG/JPEG 형식의 데이터를 불러오고 싶을 때 [문법] 메소드 의미 반환 canvas.to DataURL([형식*]) 지정한 형식의 DataURL 가져오기 문자열 *생략 가능 [내용] canvas.toDataURL()에 인수를 전달하여 형식이 다른 데이터의 DataURL을 가져올 수 있다. [예시 1] JPEG 이미지로 변환 toDataURL()의 인수에 변환하고 싶은 데이터 형식인 image/jpeg을 지정하면 JPEG 형식의 DataURL 문자열이 반환된다. JPEG 이미지는 배경이 검은색이므로 이미지 아래에 놓인 요소는 표시되지 않는다는 점에 주의하자. JavaScript main.js const data ..

209_자바스크립트에서 DataURL로 캔버스에 이미지 표시하기 [적용] 캔버스 작업 결과를 문자열로 가져오고 싶을 때 문자열 타입으로 서버에 보관하고 싶을 때 캔버스의 작업 결과를 umg 요소로 복제하고 싶을 때 [문법] 메소드 의미 반환 canvas.toDataURL() DataURL 형식 출력 문자열 [내용] toDataURL()을 사용해 캔버스 요소로 작업한 그래픽을 DataURL 형식으로 출력할 수 있다. DataURL 형식은 문자열이므로 유연한 작업이 가능하다. 예를 들어 변환한 데이터를 데이터베이스에 문자열 타입으로 보관할 수 있다. 다음은 캔버스 요소에 생성한 도형을 복제하고 표시 결과를 문자열로 변환해 umg 요소의 src 속성에 대입하는 예시이다. HTML index.html JavaS..

208_자바스크립트에서 캔버스의 이미지 가공하기 [적용] 로딩한 이미지에 효과를 넣고 싶을 때 [문법] 메소드 의미 반환 context.putImageData(이미지) 이미지 데이터 입력 없음 [내용] putImageData()는 이미지를 콘텍스트에 대입하는 메소드로, 이미지를 가져오는 getImageData()와 반대의 기능을 가진다. 다음 샘플은 첫 번째 캔버스 요소에 이미지를 배치하고 getImageData()로 화소 배열을 가져온다. 모노크롬 값을 계산하여 새로 작성한 ImageData 객체에 값을 할당하고 두 번째 캔버스 요소에 putImageData()를 사용해 값을 대입한 모노크롬 사진을 표시한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 cons..

207_자바스크립트에서 이미지의 RGBA 값 확인하기 [적용] 마우스가 가리키는 이미지의 화소 정보를 확인하고 싶을 때 이미지에 포함된 색 정보를 확인하고 싶을 때 [내용] getImageData()를 사용해 마우스 커서가 가리키는 위치의 색 정보를 구할 수 있다. 캔버스 요소를 mousemove 이벤트로 감시하여 마우스 커서의 좌표를 kayerX와 layerY 로 가져온다. getImagedata()의 첫 번째와 두 번쨰 인수에 해당 좌표를 할당하여 화소의 배열을 가져올 수 있다. 화소 정보는 CSS의 rgba()를 통해 표시한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canva..

206_자바스크립트에서 캔버스 화소 정보 다루기 [적용] 화소 정보를 확인하고 싶을 때 이미지 가공을 위한 화소의 정보를 가져오고 싶을 때 [문법] 메소드 의미 반환 context.getImageData(x, y, width, height) 지정 영역 화소 정보 가져오기 ImageData 객체 [내용] getImageData()를 사용해 캔버스 콘텍스트의 화소 정보를 가져오며, 반환값은 ImageData객체이다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canvas'); // 콘텍스트 가져오기 const context = canvas.getContext('2d'); // 색상 지정 c..

205_자바스크립트에서 캔버스에 이미지 붙여넣기 [적용] 외부의 이미지를 캔버스에 표시하고 싶을 때 [문법] 속성 의미 타입 context.drawImage(image, x, y) 캔버스 요소에 이미지 그리기 없음 [내용] Image 객체와 drawImage()를 사용해 캔버스 요소에 이미지를 표시한다. Image 객체의 로딩이 완료되지 않으면 캔버스에 이미지를 그릴 수 없으므로 onload를 사용해 미리 로딩 작업을 처리한다. drawImage()의 두 번째와 세 번째 인수는 좌표 위치를 전달한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canvas'); // 콘텍스트 가져오기 c..