Javascript

Meme Maker 이미지 저장하기 -만들고 싶은 기능 HTML에 Input 태그 넣기 Save image JavaScript로 요소 가져와서 이벤트리스너달기 const saveBtn = document.getElementById("save"); saveBtn.addEventListener("click", onSaveClick); JavaScript로 함수만들 function onSaveClick(){ const url = canvas.toDataURL(); const a = document.createElement("a"); a.href = url; a.download = "myDrawing.png"; a.click(); }

Meme Maker 텍스트 삽입하기 - 만들고 싶은 기능 HTML에 element 추가하기 Javascript 에서 element 가져와서 함수추가하기 const textInput = document.getElementById("text") // textInput이 아닌, canvas 자체에 더블클릭시 이벤트 리스너 추가 canvas.addEventListener("dblclick", onDoubleClick); Javascript 에서 함수만들기 function onDoubleClick(evnet){ const text = textInput.value; if (text !== ""){ ctx.save(); ctx.font = "48px serif" ctx.lineWidth = 1; ctx.fill..

Meme Maker 이미지 삽입하기 - 만들고 싶은 기능 먼저 HTML에 Input 태그 추가 (파일 형식, 추가될 수 있는 파일 형식설정) JavaScript 에서 element 불러오고 이벤트리스너 붙여주기 const fileInput = document.getElementById("file") fileInput.addEventListener("change", onFileChange); JavaScript 에서 onFileChange 함수 만들기 function onFileChange (event){ const file = event.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src =..

펜의 굵기 정하기 -만들고 싶은 기능 html에 먼저 input을 만들어준다. input의 종류는 range 가장 작은 값은 1, 큰 값은 15로 설정해주었고 기본값은 5로 주었다. JS에서 html의 input값을 가져온다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); //값 가져오기 const lineWidth = document.querySelector("#line-width"); ctx.lineWidth = lineWidth.value; 그다음에 값이 바뀔때마다 적용시킨다. lineWidth.addEventListner("change", onLineWidthChange); // event에..

그림판 만들기 - 만들고 싶은 기능 먼저 마우스를 움직일 때마다, 캔버스 좌표가 계속 움직여야 한다. 따라서 움직일 때마다 시작점이 바뀌는 함수를 만들어준다. canvas.addEventListner("mousemove", onMove); function onMove(event) { ctx.moveTo(event.offsetX, event.offsetY); } 마우스를 클릭하면서, 마우스를 움직이면 그림이 그려지는 것이므로, 클릭이 됐다는 신호가 주어지면 mousemove 콜백함수에서 그림이 그려져야한다. 먼저, 클릭이 되면 신호가 주어지고 클릭이 떨어지면 신호가 없어지는 함수를 만들어준다. canvas.addEventListener("mousedown", onMouseDown); canvas.addEv..

집 만들기 - 만들고 싶은 기능 혼자서 집을 만들어 봤다.. moveTo(x좌표, y좌표) : x좌표, y좌표로 이동 lineTo(x좌표, y좌표) : x좌표, y좌표로 이동하면서 그리기 stroke() : 선긋기 fillRect(x좌표, y좌표, 너비, 높이) : 사각형 그리기 stokeRect(x좌표, y좌표, 너비, 높이) : 테두리만 있는 사각형 그리기 lineWidth = "설정값" : 선의 굵기 설정하기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; ctx.fillRect(200, 200, 40, 200); ctx..