Javascript/Paint JS7 [Vanilla-JS] 3. Canvas Events canvas는 div라고 생각하자. canvas가 없을수도 있으니까 canvas가 존재하는지 확인할거다. (mousemove로 존재확인) const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if (canvas) { canvas.addEventListener("mousemove", onMouseMove); } clientX, Y는 이 윈도우 전체의 범위 내에서 마우스 위치값을 나타내는건데, 우리는 캔버스내에서의 좌표만 있으면 된다. (캔버스를 screen 사이즈로 했으면 당연히 client와 값이 같을거다.) 우리는 캔버스 크기를 다르게 했으니 다른 X&Y 값을 가진다. 캔.. 2020. 8. 13. [Vanilla-JS] 2. Styles part 먼저 color를 가져와보자. 하기전에 각 브라우저에는 각각 기본 스타일이 설정되어 있으며, 이로 인해 브라우저간에 표시가 생각처럼되지 않을 때가 있기 때문에 미리 각 브라우저의 스타일을 초기화하기 위해서 사용하는 reset.css를 사용! https://meyerweb.com/eric/tools/css/reset/ 여기서 코드를 복사해서 reset.css 파일을 만든 후 붙여넣기를 해준다. 그 후에 styles.css에 import canvas는 html태그이다. 자바스크립트로 작업할 때는 id를 사용하고, 스타일은 class를 사용할거다. @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMac.. 2020. 8. 10. [Vanilla-JS] 1. Project Setup 노마드코더 www.youtube.com/playlist?list=PL7jH19IHhOLNtwXhfYrbrqM6-CYrVkUWy 먼저 깃허브를 새로 생성하자. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 9. 이전 1 2 다음
