HTML5 캔버스 위에 대화식으로 도형을 그리는 방법은 무엇입니까?

Question

HTML5 캔버스 위에 마우스 커서로 사각형이나 원과 같은 모양을 그려야합니다. 크기를 조정할 수 있어야하며, 사용자가 도면을 끝내면 캔버스 안의 도형 좌표를 검색 할 수 있어야합니다.

자바 스크립트를 사용하여 어떻게하면됩니까? 캔버스 확실히 당신이 그리는 대상의 성격에 대해 아무것도 알고

Answer 1

감사합니다. 즉, arc 메서드를 호출 한 것보다 화면에 표시되는 픽셀 수가 많습니다.

여기에는 두 가지 접근 방법이 있습니다. 캔버스 위에 고유 한 개체 모델 래퍼를 작성할 수 있습니다. 무언가를 그릴 때마다 모양, 좌표 및 필요한 다른 것들과 같은 객체 정보를 저장해야합니다. 이것은 꽤 괜찮은 접근이지만 경고를받습니다. 생각만큼 사소한 것은 아닙니다.

두 번째 방법은 캔버스 대신 SVG를 사용하고 상자의 개체 모델을 사용하는 것입니다.

Answer 2

자바 스크립트 라이브러리 Paper.js이 (가) 유용 할 수 있습니다. 웹 사이트 소개를 의역어로 - "HTML 5 캔버스를 사용하는 벡터 그래픽 프레임 워크 제공"