whatisthis?

javaScript. Painting App 구현 - (4) Change Color javaScript. Painting App 구현 - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://m.. mywebproject.tistory.com 지난 회차 진행사항 - 색상 변경 - event.target.style.background 사용 - Array.from() 메소드 - 배열.forEach() 메소드 이해하고 넘어가기 🔻 더보기 Array.from(colors)...

javaScript. Painting App 구현 - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/297" data-og-url="https.. mywebproject.tistory.com 지난 회차 진행사항 - 2D context 이용 (canvas.getContext('2d')) - 페인팅 구현 ( path와 line 생성) function onMouseMove(event) { const x = event.of..

javaScript. Painting App 구현 - (2) Canvas Event PaintJS Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.. mywebproject.tistory.com 지난 회차 진행사항 - app.js 이벤트리스너 (mouse event) 작성 const canvas = document.getElementById("jsCanvas"); let painting = false; function stopPainting()..

javaScript. Painting App 구현 - (1) HTML/CSS Painting App 구현 - (1) HTML / CSS 셋업 index.html PaintJS Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__r.. mywebproject.tistory.com 지난 회차 진행사항 - index.html과 style.css 작성 app.js 태그 HTML 요소는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다. const canvas = document.getElementById("jsCanvas");..

Painting App 구현 - (1) HTML / CSS 셋업 index.html Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__range / controls__btns / controls__colors ㄴ jsRange ㄴ jsMode ㄴ controls__color ㄴ jsSave style.css @import "./reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantar..