HTML5 Canvas로 만드는 신기한 그림판 🎨
안녕하세요, 웹 개발에 관심 있는 모든 주니어 개발자 여러분! 오늘은 여러분과 함께 HTML5의 Canvas 기능을 활용해 신기한 그림판을 만들어 볼 거예요. 복잡하고 어려운 코드는 잠시 잊고, 우리가 만들 그림판을 통해 창의력을 마음껏 발휘해 보아요. 🚀
시작하기 전에
HTML5 Canvas는 웹 페이지 내에서 그래픽을 그릴 수 있게 해주는 HTML 요소입니다. 이를 활용해 이미지, 애니메이션 그리고 우리가 오늘 만들 그림판과 같은 인터랙티브한 요소들을 만들 수 있죠.
기본 Canvas 설정
먼저, HTML5 Canvas를 페이지에 추가해 볼게요. 아래 코드를 HTML 파일에 넣어주세요.
<!DOCTYPE html>
<html>
<head>
<title>신기한 그림판</title>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
</body>
</html>
이 코드는 800x600 크기의 Canvas를 만들고, 검은색 테두리를 추가합니다. 이제 JavaScript를 사용해 이 Canvas에 그림을 그릴 수 있게 해볼게요.
JavaScript로 그림 그리기
Canvas에 그림을 그리려면, 먼저 JavaScript를 사용해 Canvas 요소를 가져와야 합니다. 그리고 Canvas의 그리기 컨텍스트에 접근해야 하는데요, 이는 Canvas에 그림을 그릴 때 필요한 다양한 기능들을 제공합니다.
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
이제, 마우스로 Canvas 위를 드래그할 때 선을 그릴 수 있게 해볼게요. 아래 코드를 추가해주세요.
let drawing = false;
function startPosition(e) {
drawing = true;
draw(e);
}
function finishedPosition() {
drawing = false;
ctx.beginPath();
}
function draw(e) {
if (!drawing) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);
이 코드는 사용자가 마우스를 누르고 있을 때(mousedown), 마우스 버튼에서 손을 떼었을 때(mouseup), 그리고 마우스를 움직일 때(mousemove) 발생하는 이벤트를 처리합니다. 사용자가 Canvas 위를 드래그하면, 파란색의 둥근 끝을 가진 선이 그려지게 됩니다.
마무리
여러분이 만든 HTML5 Canvas 그림판에서 마음껏 창의력을 발휘해 보세요! 오늘 배운 내용을 바탕으로 다양한 색상을 사용하거나, 선의 굵기를 조절하는 등 여러분만의 기능을 추가해 볼 수도 있습니다.
HTML5 Canvas는 웹 개발에서 정말 다양하게 활용될 수 있어요. 오늘 우리가 만든 간단한 그림판 프로젝트를 시작으로, 앞으로 더 많은 창의적인 프로젝트에 도전해 보세요! 🌟
이렇게 HTML5 Canvas를 활용해 신기한 그림판을 만드는 방법을 알아보았습니다. 코드를 직접 작성하고, 수정해 보면서 여러분만의 그림판을 만들어 보세요. 웹 개발의 세계는 무궁무진한 가능성으로 가득 차 있습니다. 오늘 배운 내용을 바탕으로 더 많은 창의적인 아이디어를 실현해 보세요!