Canvas
-
[HTML] canvas 모바일에서 그리기HTML 2023. 4. 11. 15:17
보통 html canvas로 그림 그리기 같은 기능을 구현 할 때 'mousedown' 'mousemove' 'mouseup' 이벤트를 사용한다. 하지만 모바일 기기에서는 마우스 이벤트와는 다르게 터치 이벤트를 사용해야 한다. touchstart touchmove touchend 이때 우리는 보통 터치 이벤트로 스크롤을 하는데 캔버스에서 터치 이벤트가 발생하면 같이 스크롤이 되는 경우가 있다. 이때 canvas의 touchmove 이벤트가 발생하였을 때 e.preventDefault()를 하게 되면 스크롤이 되지 않아 문제를 해결할 수 있다. e.preventDefault()
-
[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..