Javascript36 [Vanilla-JS] 5. Changing Color / Brush Size 먼저 각 색상에 클래스를 정의한다. const colors = document.getElementsByClassName("jsColor"); console.log로 출력해보니 Array가 안나와서 array.from 메소드를 사용하겠다. (object로부터 array를 만든다.) console.log(Array.from(colors)); 우리가 원하는건 backgroundColor이다. 이제 context color를 변경해야 된다. 기본값이 검은색으로 되어있는 strokeStyle에 클릭한 색상의 값이 들어간다. color를 target으로부터 받아서 넣은 것 뿐이다. js파일에 jsRange 아이디를 추가하는 게 필요하다. const range = document.getElementById("jsRa.. 2020. 8. 17. [Vanilla-JS] 4. 2D Context Context라는건 요소 안에서 우리가 픽셀에 접근할 수 있는 방법이다. canvas는 context를 갖고 있는 HTML의 요소인데, 우리는 그 요소 안에서 픽셀을 다루는것이다. const ctx = canvas.getContext("2d"); context의 default를 설정할거다. context는 fillColor를 가지고 있다. (fillStyle 색상이나 스타일을 shape안에 사용할 수 있다.) 이걸 사용하려는 사람이 저 색상을 첫 번째로 시작하도록 설정한거다. 우리가 그릴 선들이(context 안에 있는) 모두 이 색을 갖는다고 말해주는것. 이게 context의 lineWidth이다. (기억해둬야됨) lineWidth = 2.5 는 그 선의 너비가 2.5px 이라는 것. onMouseUp.. 2020. 8. 17. [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. 이전 1 2 3 4 5 ··· 9 다음
