반응형
Canvas내위치확인
-
JavaScript 입문 : Canvas 이론 정리 - 마우스 이벤트로 좌표 이해 및 (clientX, clientY, offsetLeft, offsetTop) 클릭되는 지점 원 그리기컴퓨터 알아가기/JavaScript 2022. 11. 25. 19:30
이번 시간에는 캔버스 위에 마우스로 작은 원을 찍는 개념을 보고자 합니다. 이를 위해서는 캔버스와 화면에서 위치를 나타내는 속성에 대한 이해가 필요한데 강좌의 내용과도 다른 내용도 있어 자신만의 환경에 맞는 상황들을 분석해 가면서 위치에 대한 개념을 잡는게 중요하다고 봅니다. 역시 본 내용은 '1분코딩 HTML5 캔버스 라이브 강좌'를 기본으로 공부해 보고자 합니다. 1. 원 그리기 함수 만들기 캔버스 위에 클릭이벤트를 활용한 원 그리기 함수를 만들어 봅니다. 마우스를 클릭하면 x, y축으로부터 100씩 떨어진 반지름 10인 원이 다음과 같이 그려집니다. 여기까지야 쉽게 만들수 있습니다. 2. 매개변수(event) 속성 확인 궁극적 목적은 마우스를 클릭하는 지점마다 원을 그리는 것이기 때문에 매개변수로 ..