전체 글 (64) 썸네일형 리스트형 [momentum app] stopwatch 만들기 https://ge5rg2.github.io/momentum-2021/ Momentum App What are the things you need to focus on today? ge5rg2.github.io 개인적으로 사용 빈도가 가장 높을 것 같은 stopwatch를 만들고 momentum app 기능에 추가했다. ✖ 00:00:00 start stop HTML (화면 내리는 버튼은 기존에 사용하던 pageDown Class를 활용하였다.) .main-timer { z-index: 4; position: absolute; top: 50px; left: 10px; flex-direction: column; justify-content: center; align-items: center; height:.. [momentum app] 그림 저장 버튼 지난번에 이어서 저장 버튼을 활성화시켜 보았다. const saveBtn = document.getElementById("jsSave"); function handleCM(event) { event.preventDefault(); /* 마우스 우클릭 방지 함수 */ } function handleSaveClick() { const image = canvas.toDataURL(); const link = document.createElement("a"); link.href = image; link.download = "PaintJS[🎨]"; link.click(); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); canvas.addEve.. [2021.10.07] 로이 일상 사진 [2021.10.03] 로이 일상 사진 [momentum app] 지우개 기능 추가 const eraser = document.getElementById("jsEraser"); let erasingStart = false; let erasingStop = false; function stopPainting() { if(erasingStop === true) { erasingStart = false; painting =false; } else { painting = false; } } function startPainting() { if(erasingStop === true) { erasingStart = true; painting =false; } else { painting = true; } } function onMouseMove(event) { const x = event.offs.. [momentum app] 페인트 굵기 조절, 채우기 const range = document.getElementById("jsRange"); function handleRangeChange(event) { const size = event.target.value; ctx.lineWidth = size; } if(range) { range.addEventListener("input", handleRangeChange); } html내 range를 변수로 만들고, range type는 input으로 value가 변경되기 때문에 addEventListener에 "input" 삽입, 담당 함수를 생성 후 range 값 변경 시 value값으 변경 되므로 가존 default값이 2.5였던 ctx.lineWidth를 변경되는 값의 변수로 지정한다. 색상 변경시 굵기.. [momentum app] 컬러 변경 getElementsByClassName : 해당 class name 전부 선택 querySelector : 해당 속성 태그 중 맨 처음 하나만 선택 /* querySelectorAll 은 전부 선택 */ const colors = document.getElementsByClassName("jsColor"); Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick)); /* color => color.add... 에서 color은 다른 단어로 변경 가능 */ 위와 같이 getElementsByClassName으로 불러 올때 Array가 되어있지 않아서 Arrary.from으로 따로 지정해줘야 하지만 const.. [2021.10.01]로이 일상 사진 이전 1 ··· 4 5 6 7 8 다음
