Javascript/Vanilla Javascript

https://ddaeunbb.github.io/project/mbti/index.html 내 안에 숨어있는 직업캐 찾기! 누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요! prismatic-monstera-4c9d6a.netlify.app

Meme Maker 밈메이커 https://ddaeunbb.github.io/project/meme-maker/index.html Meme Maker You really want to reset your canvas? Yes No ddaeunbb.github.io

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