romiwaves

밈 메이커 만들기 (5)

/JavaScript  밈 메이커 만들기 (4)/JavaScript    밈 메이커 만들기 (3)/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수romiwaves.tistory.com ... 깃에 푸시한 기록은 있는데 왜 내 로컬 파일에는 한참 전의 버전으로 저장되어 있는지 모르겠다. 브랜치를 잘못 타고 있었다. 바보인가?? 아무튼 4편에서 언급하였던 것처럼 code challenge에 도전하였다. 폰트의 사이즈와 종류를 사용자가 바꿀 수 있도록 하는 기능을 추가하는 것! const fontSelect..

/JavaScript    밈 메이커 만들기 (3)/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니romiwaves.tistory.com 📌 Adding Images- 로컬 이미지를 불러와 캔버스와 동일한 크기로 캔버스 위에 뿌려줄 수 있는 코드를 작성하였다. 우선 file을 input으로 받는다. 유의할 점은 type만 설정하면 어떤 형태의 파일이라 할지라도 다 받아온다. 우리가 필요한 것은 이미지를 받아 오는 것이므로, accept를 통해 이미지 파일만 받을 수 있..

/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시romiwaves.tistory.com  📌 Mouse Painting- 사용자가 isPainting = true 상태에서 mousemove일 때 그림이 그려져야 한다.function onmove(event) { if(isPainting) { //isPainting 변수를 이미 선언해 둔 상황 ctx.lineTo(event.offsetX, event.offsetY); ..

/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디romiwaves.tistory.com  📌 Painting Lines- 캔버스를 클릭했을 때 선을 그리도록 하고 싶다: 그럼 클릭했을 때의 위치 좌표를 알아야 하고, 이론적으로는 (0,0)을 클릭해도 클릭되었다고 떠야 한다.function onclick(event){ ctx.lineTo(event.offsetX, event.offsetY); //클릭한 곳의 좌표 ctx.stroke(); //라인 ..

/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API" data-og-url="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API" data-og-image="https://scrap.kakaocdn.net/dn/dinJdB/hyX..