[Javascript] Canvas로 포토샵 같은 그림판 만들기

포토샵 같은 그림판? 말 그대로다. 별도의 레이어로 관리 될 수 있는 캔버스 그림판을 만들어보자. 일단 포토샵은 도형을 실제로 그리거나 할 때 해당 도형이 실제로 어떻게 나올지 미리 보여주고, 마우스를 놓을 때 실제 도형이 나타나게 된다. 소스코드 실선 사각형 지우개 파란색 빨간색 분홍색 주황색 5px 10px 15px 20px 원리 원리는 간단하다. 캔버스를 누른 뒤, 마우스를 움직이게 되면 마우스가 이동한 경로를 currentRect의 coordinates 배열에 저장한다. coordinates에 저장 된 좌표 값을 바탕으로 현재 그리는 도형이 무엇인지에 따라 각기 다른 방식으로 캔버스에 그림을 그린다. 그렇게 그려진 도형은 currentRect 변수를 통해 rects 배열에 저장 되며, 추후에 캔버..
프로그래밍/Javascript 2020. 5. 24. 14:05
1