-
JavaScript 입문 : Canvas 이론 정리 - 그림판 만들기 (컬러버튼 만들고 색상별 선 그리기)컴퓨터 알아가기/JavaScript 2022. 12. 25. 19:30728x90반응형
지금까지 기본적인 캔버스 이론을 공부하면서 작동이 되는 원리를 중점으로 보았습니다. 도형을 만들고 마우스이벤트를 통하여 원하는 선을 그려 보았습니다. 이러한 원리를 기준으로 '약식 그림판'을 만들어 보도록 하겠습니다.
역시 본 내용은 '1분코딩의 캔버스 라이브 강좌'를 기본으로 공부하고 있습니다.
1. 그림판 기본 구조
반지름이 10인 작은 원으로 캔버스 위 선을 그려 보았으니 이제 그리는 선의 색상을 다양하게 만들어 클릭시마다 색이 변경되어 그림을 그리는게 기본 개념입니다.
한 5가지 정도 색상에 대한 버튼을 만들고 클릭이벤트를 통하여 버튼 색을 바꾸는 이벤트를 고려해야 하는데 각 버튼을 이벤트타겟에 대입시키면 되겠습니다.
① 컬러버튼 만들기
버튼이 들어가는 <div>태그를 만들고 해당 버튼의 클래스명을 통하여 CSS를 간단히 만들어 줍니다.
HTML 
CSS 
브라우저 ② 버튼 연결
이제 자바스크립트에서 버튼을 연결하고 클릭이벤트 함수를 만듭니다. 색상 버튼에 대한 변수를 만들고 시작해야겠지요. 전체를 아우르는 부모태그의 클래스명을 사용하여 전체 버튼을 콘트롤 합니다.
2. 버튼 연결 클릭이벤트
클릭이벤트인 btnControl 함수를 만들어 봅니다.
btnControl함수를 생각해 보면 버튼을 누르는 행위는 하나의 이벤트라고 할 수 있습니다. 그리고 각각의 버튼이라는 개념은 타겟을 말합니다. 상기 함수에 매개변수 event를 넣고 콘솔에서 event.target을 확인해 보겠습니다.
상기 콘솔에서 빨간색 버튼을 클릭하면 콘솔에 red버튼이라는 target이 명확하게 나오네요. 이제 각 색상별로 적용하기 위해서는 자바스크립트에서 getAttribute( ) 메소드를 사용하여 5개의 색상에 적용해 줍니다.
상기 콘솔을 보면 'red'로 명확하게 나옵니다. 이제 console.log( ) 대신 각 버튼을 나타내는 변수를 만들어 이 곳에 대입하면 버튼 기능을 사용할 수 있고 이 변수가 캔버스 fillStyle에 연결되면 색을 변경하면서 그림판처럼 자유롭게 그릴 수 있게 됩니다.
3. 그림판 그리기
캔버스 위 5가지 색상으로 자유롭게 선을 그릴 수 있습니다.
4. 전체코드
<!DOCTYPE html> <html> <head> <title>Canvas</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> canvas { background: #eee; } /* 2. 컬러버튼 만들기 */ .color-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; } .color-btn[data-color='black'] {background-color: black;} .color-btn[data-color='red'] {background-color: red;} .color-btn[data-color='green'] {background-color: green;} .color-btn[data-color='blue'] {background-color: blue;} .color-btn[data-color='purple'] {background-color: purple;} </style> </head> <body> <h1>Paint Brush</h1> <canvas class="canvas" width="600" height="400"></canvas> <!-- 1. 버튼형 색깔 만들기 --> <div class="btn"> <button class="color-btn" data-color="black"></button> <button class="color-btn" data-color="red"></button> <button class="color-btn" data-color="green"></button> <button class="color-btn" data-color="blue"></button> <button class="color-btn" data-color="purple"></button> </div> <script> const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d'); let drawing; // 3.3 색 변수, 기본 검은색 let colorSelector = 'black'; // 3. 버튼 연결하기 const btn = document.querySelector('.btn'); function downDraw() { // 누르고 움직이면 그리기 (움직임 true) drawing = true; } function upDraw() { // 떼고 움직이면 그리기 멈춤 (움직임 false) drawing = false; } function moveDraw(event) { if (!drawing) return; // drawing이 false면 멈추기 const dx = event.clientX - ctx.canvas.offsetLeft; const dy = event.clientY - ctx.canvas.offsetTop; // console.log(event); ctx.beginPath( ); ctx.arc(dx, dy, 10, 0, Math.PI*2, false); ctx.fill(); } // 3.2 btnControl 함수 function btnControl(event) { colorSelector = event.target.getAttribute('data-color'); // 3.4 btnControl 작동, click하면 색을 바꾸어 줌 ctx.fillStyle = colorSelector; } canvas.addEventListener('mousedown', downDraw); canvas.addEventListener('mousemove', moveDraw); canvas.addEventListener('mouseup', upDraw); // 3.1 버튼 클릭이벤트 btn.addEventListener('click', btnControl); </script> </body> </html>반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글