# HTML 캔버스 내부의 마우스 좌표 확인 방법
1. HTML 캔버스 생성(html)
<canvas id="myCanvas" width="400" height="300"></canvas>
2. 캔버스 취득(Javascript)
const canvas = document.getElementById("myCanvas");
3. 마우스 클릭시, 캔버스내 좌표 확인
canvas.onclick = function(event){
const x = event.clientX - ctx.canvas.offsetLeft;
const y = event.clientY - ctx.canvas.offsetTop; }
* 캔버스 객체에 onclick 이벤트 콜백함수를 등록한다.(상황에 따라 onmousedown을 사용해도 된다)
* 마우스의 좌표(event.clinetX, event.clinetY)와 캔버스의 위치(ctx.canvas.offsetLeft, ctx.canvas.offsetTop)를 계산하여 캔버스내 좌표를 계산한다.
4. 마우스 이동시, 캔버스내 좌표 확인
canvas.onmousemove = function(event){
const x = event.clientX - ctx.canvas.offsetLeft;
const y = event.clientY - ctx.canvas.offsetTop; }
* 캔버스 객체에 onmousemove 이벤트 콜백함수를 등록한다.
* 마우스의 좌표(event.clinetX, event.clinetY)와 캔버스의 위치(ctx.canvas.offsetLeft, ctx.canvas.offsetTop)를 계산하여 캔버스내 좌표를 계산한다.
마우스 위치와 캔버스의 위치를 파악하여,
캔버스 내부의 마우스 좌표를 확인하는게 코드의 핵심이다.
# 샘플 예제 코드
캔버스 내부에서 마우스를 클릭한 위치에 사각형을 그려보는 예제
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black;"></canvas>
<!-- Javascript -->
<script>
// 1. 캔버스 및 그리기객체 취득
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext("2d");
// 2. 마우스 클릭 이벤트 처리: 좌표 취득 + 사각형 그리기
canvas.onclick = function(event){
// 캔버스의 위치를 고려해 마우스 좌표를 취득
const x = event.clientX - ctx.canvas.offsetLeft;
const y = event.clientY - ctx.canvas.offsetTop;
// 마우스 클릭한 곳에 사각형 그리기
ctx.fillRect(x-15, y-15, 30, 30);
}
</script>
</body>
</html><결과물>
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| VSCode 캔버스(Canvas), WebGL 자동완성 안됨 해결 방법: @type (0) | 2021.06.14 |
|---|---|
| HTML Canvas(캔버스) 애니메이션 구현 방법 기초 (0) | 2021.06.04 |
| HTML Canvas(캔버스) 텍스트 그리기 방법: fillText, strokeText (0) | 2021.06.04 |
| HTML Canvas(캔버스) 패턴 이미지 채우기 적용 방법: createPattern (0) | 2021.06.04 |
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
댓글