본문 바로가기

Web Study/노마드코더11

노마드코더 JS로 그림 앱 만들기 - 2 그림판의 다양한 기능 추가하기 input 필드의 range 타입을 이용하여 브러쉬의 굵기 지정해주기 const lineWidth = document.querySelector('#line-width'); ctx.lineWidth = lineWidth.value; function onLineWidthChange(evt) { ctx.lineWidth = evt.target.value; } lineWidth.addEventListener('change', onLineWidthChange); 추가로 위처럼 굵기를 지정해주면, 선이 그려질때마다 같은 경로를 참조하고 있으므로 굵기가 변하는 버그가 생긴다. 이를 위해서 마우스가 Up 되거나 leave 될 때 컨텍스트를 beginPath() 해준다. 선의 색 바꿔주기 .. 2023. 6. 9.
노마드코더 JS로 그림 앱 만들기 - 1 초기 설정 // index.html app.js / index.html / styles.css 파일 생성 live sever 확장 프로그램 설치 ❗️ canvas 란? https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Canvas API - Web APIs | MDN The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video p.. 2023. 6. 8.
바닐라 JS 크롬 앱 만들기 (6~8) Math.random() 과 Math.floor() 를 사용하여 랜덤 명언과 랜덤 배경화면을 구현 배열에서 난수로 가져오는 것은 동일 했음. const quotes = [ { quote: "명언1", author: "저자1", }, { quote: "명언2", author: "저자2", }, { quote: "명언3", author: "저자3", }, { quote: "명언4", author: "저자4", }, { quote: "명언5", author: "저자5", }, ] const quote = document.querySelector('#quote span:first-child'); const authors = document.querySelector('#quote span:last-child');.. 2023. 2. 27.
바닐라 JS 크롬 앱 만들기 (5) clock 만들기 1. setInterval(콜백함수, ms시간) 콜백함수를 시간 간격으로 반복해서 호출해준다 2. setTimeout(콜백함수, ms시간) 콜백함수를 일정 시간 이후 호출해준다 (반복x) 3. Date 클래스 3-1. new Date() : 현재 날짜~시간 정보를 가지고 있다. 3-2. new Date().getDate() : 현재 날짜 3-3. new Date().getDay() : 현재 요일 3-4. new Date().getHours() : 현재 시각 3-5. new Date().getMinutes() : 현재 분 3-6. new Date().getSeconds() : 현재 초 3-7. new Date().getFullYear() : 현재 년도 -> getYear() 아님!! ne.. 2023. 2. 23.

티스토리툴바