javasciprt
-
[HTML] canvas 캔버스 도형 그리기 (사각형, 원)HTML 2023. 3. 25. 17:04
html canvas를 이용하여 드로잉 애플리케이션을 구현하던 중 도형 그리기 기능을 추가하고 싶었다. (도형 중 사각형을 위주로 설명한다.) canvas에서 사각형을 그리는 방법은 다음과 같다. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(x, y, width, height); // 채워진 사각형 ctx.strokeRect(x, y, width, height); // 윤곽선만 있는 사각형 하지만 우리가 원하는 건 캔버스 안에서 드래그를 통해 도형을 그리는 것이다. 이를 위해 캔버스에 이벤트로 mousedown, mousemove, mouseup 을 사용한다. moused..