Javascript/Paint JS7 [Vanilla-JS] 7. Saving the Image 이미지를 우클릭하면 아래와 같이 저장이 가능하다. canvas는 pixel을 다루는 거니까 기본적으로 image를 만든다. 그래서 download와 save파트는 이미 내장되어 있다. 하지만 아래와 같이 저장했을 때 버그가 있다. canvas의 배경색이 transparent(투명)로 저장이 된다. canvas의 배경색을 설정하지 않아서 실제 pixel manipulator canvas에 background를 설정하지 않았다. ( HTML 의 background만 설정한거다.) 그래서 canvas가 load 되자마자 설정되도록 해야된다. fillStyle을 black으로 만들기 전에 이렇게 설정을 하면 기본적으로 canvas의 background는 default에 의해서 하얀 배경이 되는거다. 이러한 co.. 2020. 8. 20. [Vanilla-JS] 6. Filling Mode fillRect() : width와 height에 의해서 결정된 사이즈로 (x, y)위치에 색칠된 사각형을 그린다. 캔버스에서는 위에서부터 아래로 내려오면서 실행이 된다. 색상을 클릭하면 strokeStyle과 fillStyle을 color값으로 설정해주는 거다. 기본 색상값도 설정해놓겠다. 클릭 시 사격형이 만들어지게 하는 함수를 만들어보자. 하지만 색을 채우고 painting을 하면 paiting한 색으로 채워지는 문제점이 발생한다. 그래서 filling variable이 필요하다. filling이 true 상태에서만 색이 채워지도록 만들었다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 20. [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. 이전 1 2 다음
