-
JavaScript 입문 : 캔버스 (Canvas) 기초 - 마우스 이용 자유 곡선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 6. 19:30728x90반응형
Canvas 기초 두번째 시간으로 이제는 본격적으로 함수를 이용하여 곡선 그리기에 도전을 하고자 합니다. 이 곳에서는 마우스를 사용하며 기본적으로 addEventListener의 마우스 이벤트를 활용하여 진행하고자 합니다.
다음 그림과 같이 자유 곡선 기능을 사용하여 Canvas내 글씨를 써 보는게 오늘 목표입니다.
이 내용은 'developedbyed 유투브 강좌'를 기본으로 응용해 본 것입니다.
캔버스에 마우스를 이용하여 자유 곡선을 만들고자 하면 이벤트를 이용합니다. 마우스를 누르고 그리기 때문에 시작점은 'mousedown'이벤트가 필요하고 그리기를 끝내는 경우는 'mouseup'입니다. 그리고 본격적으로 그려지는 이벤트는 'mousemove'입니다.
① 마우스 이벤트 기본구조 만들기
Canvas를 활용하기 위해서 기본은 지난시간 설명 했습니다. id가 필요한 <canvas>태그를 HTML <body>태그에 선언하고 다음과 같이 기본 구조는 세팅합니다.
이제는 마우스 이벤트를 하기위한 기본구조를 만들 예정인데 자바스크립트에서 연습했던 플래그변수를 이용합니다. 즉, 곡선을 그리지 않는다는 것을 기본 false로 놓고 진행합니다.
다음과 같이 구조를 짭니다.
참고로 플래그변수 (여기서는 curve)는 기본값을 false로 가져가고 작동이 되는 경우를 true로 해줍니다.
② 그리기 함수 draw(e)
가장 중요한 그리는 기능을 반영하기 위해서는 대부분의 Canvas 실행은 draw( )함수에서 진행합니다. 이벤트 기능이기 때문에 괄호안에 매개변수 e를 사용합니다.
전체 순서를 고민해야 되는데 일단 아무것도 하지 않으면 아무일도 일어나지 않는 부분을 플래그 변수로 세팅하고 그리고자 하는 라인에 대한 속성을 먼저 만들어 줍니다.
위 코드에서 이벤트 매개변수 e가 있기때문에 Canvas 화면 위 x, y좌표를 지정하지 않고 마우스가 시작되는 지점을 나타내기 위하여 e.clientX 와 Y값을 지정합니다.
회면을 보면 다음과 같이 그려지는데 끝나는 지점에서 자동 시작되는 현상이 벌어집니다.
beginPath( )와 x, y 값을 지정해주면 됩니다.
아울러 finish( ) 함수에서 끝나는 지점에서 다시 beginPath( )를 적용해 줘야 경로를 재설정하여 그려질 수 있습니다.
여기까지 하면 자유곡선을 만들 수 있는데 클릭하나로 점을 찍고자하면 되지 않습니다. draw(e) 함수를 start(e)함수에도 반영을 합니다.
전체코드를 공유합니다.
<!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 기본 연습</title> <style> * { margin: 100; padding: 0; box-sizing: border-box; } /* #canvas { border: 2px solid black; } */ </style> </head> <body> <canvas id="canvas"></canvas> <script> // 기본 변수잡기 const $canvas = document.querySelector('#canvas'); // context를 통하여 2D or 3D 가져오기 const ctx = canvas.getContext('2d'); // resizing : 전체화면 틀 canvas.height = window.innerHeight; canvas.width = window.innerWidth; // 자유 곡선 만들기 let curve = false; // 플래그 기본값 function start(e) { curve = true; // 누른 경우 draw(e); } function finish(e) { curve = false; // 누르지 않은 경우 ctx.beginPath(); // 끝난 지점에서 다시 시작 } function draw(e) { // 그림 안그릴때는 아무 반응없기 if(!curve) return; // 선 굵기, 타입지정 ctx.lienWidth = 10; ctx.lineCap = 'round'; // 마지막 색도 가능 ctx.strokeStyle = 'red'; // 편한 위치 시작 ctx.lineTo(e.clientX, e.clientY); // 시각화 ctx.stroke(); // 이어짐 방지, 시작점 ctx.beginPath(); ctx.lineTo(e.clientX, e.clientY); } canvas.addEventListener('mousedown', start); // 누를때 canvas.addEventListener('mouseup', finish); // 뗄때 canvas.addEventListener('mousemove', draw); // 그릴때 </script> </body> </html>반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글