-
JavaScript 입문 : Canvas Animation II - 클릭이벤트(PointerEvent)를 이용하여 원 찍어내기컴퓨터 알아가기/JavaScript 2022. 11. 8. 19:30728x90반응형
Canvas Animation 2번째 시간입니다.
지난 시간 초록색 원을 그려 보았고 이제는 마우스 클릭 이벤트를 이용하여 클릭때마다 원을 만들어 볼 예정입니다. 이미 설명 하였듯이 이렇게 미리 만들어 놓은 프로그램(라이브러리)을 이용하는 것이 아니라 순수하게 자바스크립트 언어만으로 결과를 만들어 내는 것을 특히 '바닐라 자바스크립트'라고 불립니다.
역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다.
1. 원 만들기 기본
지난 시간 초록색 원을 만든 전체 코드는 다음과 같습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Animation</title> <style> #canvas { position: absolute; background: black; width: 100%; height: 100%; left: 0; top: 0; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 크기 지정, 역시 브라우저를 움직이면 길이 늘어남 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 원그리기 arc(x, y, r, sdeg, edeg) window.addEventListener('resize', function() { // 사이즈 고정 canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); ctx.fillStyle ='green'; // 채우기 ctx.lineWidth = 5; // 선 굵기 ctx.setLineDash([10]); ctx.beginPath(); ctx.arc(100, 150, 50, 0, Math.PI * 2); ctx.fill(); // 채우기 </script> </body> </html>
2. 클릭하면 원 만들어지기
지금부터는 함수를 이용하여 Canvas내 원을 만들고 각 좌표를 확인하는 방법을 공부할 차례입니다. 먼저 위 코드에서 원그리기 코드는 전체 삭제를 하고 기본적인 Canvas 만드는 코드만 남겨주고 시작합니다.
원 만드는 코드는 별도의 함수를 이용할 예정입니다.
① 변수 설정
마우스로 클릭하는 위치마다 원을 만들어 낼 예정입니다. 그러기 위해서는 브라우저의 위치에 대한 이해가 필요합니다. 일단 잘 모르겠고 하나 확실한 것은 왼쪽끝 상단 모서리는 x, y좌표가 각각 0입니다. 0으로 시작하여도 되지만 변수인 관계로 null로 지정해 줍니다.
② x, y 좌표와 클릭이벤트 좌표 연결
캔버스의 클릭이벤트를 통하여 x, y좌표를 다음과 같이 연결해 줍니다.
콘솔에서 event가 어떻게 작동하는지 보도록 하겠습니다.
회면을 클릭하면 콘솔에 PointerEvent가 다음과 같이 나타납니다.
작은 화살표를 클릭하여 좀 더 자세히 보도록 하겠습니다.
속성이 업청 많은데 잘 모르겠고 눈에 띄는 숫자가 clientX, clientY가 보이네요. 방금 찍은 좌표를 나타냅니다. 결국 마우스의 x좌표는 클릭이벤트의 x좌표로 연결을 시켜줄 수 있습니다.
이제는 원을 그리도록 하겠습니다.
③ 함수 이용 원 그리기
그동안 연습했던 원 그리기 방법을 함수로 만들어 준 것 뿐입니다. 나중에 활용하기 위함이죠.
상기 ②번에서 클릭이벤트를 만들어 주었기 때문에 원 그리기 함수의 x, y죄표를 마우스와 같은 좌표로 다음과 같이 만들어 줍니다.
이제 준비가 되었으니 drawCircle( ) 함수호출을 클릭이벤트가 있는 곳으로 옯깁니다. 지금 상태는 브라우저 캔버스 왼쪽 상단 모서리에 4부의1정도만 초록색 원이 보일건데 클릭이벤트에서 함수를 호출하면 클릭할 때 마다 원이 찍힙니다.
이제 조금씩 Canvas에 대해 이해도가 높아지고 있습니다. 이렇게 좌표를 읽어가는 방법을 이용하여 다음 시간에는 마우스를 따라다니는 원을 만들어 보도록 하겠습니다.
참고로 클릭이벤트를 포함한 다양한 애니메이션을 위한 변수를 null에서 회면에 보이지 않는 undefined로 바꾸고 다음 공부를 하도록 하겠습니다.
반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글