반응형
- _04_포인트인렉트
- 버튼이다. 버튼을 직접 만들어 보는것
- html버튼이 내부적으로는 이런 일이 벌어지는것
- <button>
- pointInRect.html
-
<!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>Document</title></head><body><h1>네모를 클릭하세요. </h1><canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas><div class="testText"></div><script src="pointInRect.js"></script></body></html>
- pointInRect.js
//캔버스에 사각형을 그리고,//마우스를 클릭했을 때 클릭한 좌표가 사각형 안에 있는지 판단하여 색상을 변경
function draw() { //화면 초기화 후 사각형 그림// 캔버스를 지운다.ctx.clearRect(0, 0, canvas.width, canvas.height); //전체 캔버스를 지웁니다.//매 프레임마다 캔버스를 초기화합니다. (사각형이 계속 겹쳐 그려지는 걸 방지)
// 캔버스를 다시 그린다.drawRect();}
function drawRect(){ctx.beginPath();
ctx.rect(x, y, width, height);// 여기서 캔버스에 width, height 집어 넣은건가?// 캔버스 위에 사각형의 경로(path)를 정의하는 것입니다.// ctx.rect(...)는 단지 "사각형을 이만큼 그릴 거야"라고 모양만 지정하는 것이고,// 실제로 그리려면 ctx.fill() 또는 ctx.stroke() 같은 그리기 명령이 뒤따라야 합니다.ctx.fill(); //그려진 사각형 경로를 채웁니다.//현재 fillStyle 값을 기준으로 채워짐.if(check){ctx.fillStyle = "red";}else{ctx.fillStyle = "blue";}ctx.closePath();}
window.addEventListener("click", (event) => { //클릭 좌표가 사각형 안인지 확인하고 색 바꿈//브라우저 창에서 클릭 이벤트가 발생했을 때 실행될 코드입니다.
// 캔버스가 화면 왼쪽 상단에서 일정간격 벗어나있다.// 그 간격만큼 조정한다.let mx = event.clientX - ctx.canvas.offsetLeft;//event.clientX: 브라우저 창 기준 X좌표//두 값을 빼면 → 마우스 클릭 좌표를 캔버스 기준으로 환산
//✔️ clientX, clientY는 브라우저에서 기본 제공되는 이벤트 속성입니다.//→ 마우스의 위치를 제공하는 **"원래 있는 함수"가 아니라 속성(property)**입니다.let my = event.clientY - ctx.canvas.offsetTop;//마우스 위치를 잡는다.
if(x < mx && mx < x + width && y < my && my < y + height){// x < mx && mx < x + width => 마우스가 네모 사이를 눌렀으면//가로// y < my && my < y//세로//마우스 좌표 (mx, my)가 사각형 (x, y, width, height) 범위 안에 있는지 검사check= true;}else{check= false;}
//.testText 클래스 요소에 디버깅 정보 출력//이 click 이벤트 리스너는 마우스를 클릭할 때만 실행됩니다.// 그래서 내부에 작성한 디버깅 출력 코드도 클릭한 순간만 실행됩let testText = document.querySelector(".testText");testText.innerHTML = ``;testText.innerHTML += `x : ${x} <br>`;testText.innerHTML += `y : ${y} <br>`;testText.innerHTML += `mx : ${mx} <br>`;testText.innerHTML += `my : ${my} <br>`;testText.innerHTML += `ctx.canvas.offsetLeft : ${ctx.canvas.offsetLeft} <br>`;testText.innerHTML += `ctx.canvas.offsetTop : ${ctx.canvas.offsetTop} <br>`;});
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
let x = 220;let y = 220;let width = 100;let height = 100;
let check = false;
setInterval(draw, 10); //매 10ms마다 화면 다시 그림
캔버스랑 css랑 차이점이 뭐야?
ChatGPT의 말:
좋은 질문입니다!
HTML <canvas>와 CSS는 둘 다 웹에서 시각적인 요소를 다루지만, 역할과 개념이 완전히 다릅니다.
아래에서 쉽게 비교해볼게요.
✅ 한줄 요약
구분역할 요약
| CSS | 웹 요소의 **모양(스타일)**을 꾸미는 도구 |
| Canvas | 자바스크립트를 이용해 직접 그림을 그리는 공간(도화지) |
✅ CSS란?
CSS (Cascading Style Sheets)
→ 웹페이지에 있는 요소들(div, h1, p 등)을 꾸미는 언어
🔹 역할
- 색상, 글꼴, 배치, 크기 등 스타일을 지정
- 반응형 레이아웃 제작 가능
- 마우스 오버 효과, 애니메이션 등도 가능
🔹 예시
html
복사편집
<div class="box">Hello</div> <style> .box { width: 100px; height: 100px; background-color: red; color: white; font-size: 20px; text-align: center; } </style>
- 위 코드에서 <div>는 그냥 박스고,
- CSS가 그 박스를 예쁘게 만든 것입니다.
✅ <canvas>란?
Canvas (도화지)
→ HTML5에서 도입된 그래픽 그리기용 요소
🔹 역할
- 픽셀 단위로 그림을 그릴 수 있는 공간
- 자바스크립트를 사용해서:
- 도형, 텍스트, 이미지, 그래프
- 게임, 시뮬레이션, 애니메이션 등 구현
🔹 예시
html
복사편집
<canvas id="myCanvas" width="300" height="150"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 100, 100); // 파란 사각형 </script>
- 이 코드는 캔버스에 직접 파란 사각형을 "그린" 겁니다.
- CSS로는 이런 사각형을 만들지 않고 "그림"만 가능
✅ 핵심 차이 비교
항목CSSCanvas
| 역할 | 스타일링 (디자인 적용) | 직접 그림 그리기 (픽셀 기반) |
| 조작 대상 | HTML 요소 (div, p, img...) | 픽셀, 경로, 이미지, 텍스트 등 |
| 방법 | 선언형 (style="", <style>) | 자바스크립트 코드로 그림 그리기 |
| 인터랙션 지원 | 기본은 없음, JS로 가능 | 마우스/키보드 입력 대응 직접 구현 필요 |
| 사용 용도 | 레이아웃, 스타일, 반응형 UI | 게임, 애니메이션, 그래프, 시뮬레이션 |
| 업데이트 방식 | 브라우저가 자동 반영 (DOM 기반) | 수동으로 다시 그림 (clear, draw) |
✅ 간단 비유
CSSCanvas
| 벽지를 바르는 느낌 | 도화지에 직접 그림 그리는 느낌 |
| 미용사 스타일링 | 화가가 직접 그리는 그림 느낌 |
✅ 같이 쓸 수 있을까?
네, 아주 자주 같이 사용합니다!
- CSS로 캔버스의 위치나 크기를 조정하고,
- JavaScript + Canvas로 내용을 동적으로 그림.
html
복사편집
<canvas id="gameCanvas"></canvas> <style> #gameCanvas { border: 2px solid black; background-color: #f0f0f0; } </style>
✅ 결론
궁금한 점답변 요약
| 캔버스는 뭐야? | JavaScript로 직접 그림을 그릴 수 있는 도화지입니다. |
| CSS는 뭐야? | HTML 요소를 예쁘게 꾸미는 스타일 도구입니다. |
| 둘이 어떻게 다름? | 캔버스는 그림 그리기, CSS는 스타일 적용이 핵심입니다. |
원하신다면 CSS만으로 할 수 있는 것 vs 캔버스로 해야 하는 것도 예시로 비교해드릴게요!
필요하시면 말씀해주세요 😊
나의 말:
말해줘
ChatGPT의 말:
좋습니다!
“CSS만으로 할 수 있는 것” vs “Canvas를 써야만 가능한 것”
차이를 구체적인 예시로 비교해서 알려드릴게요.
✅ CSS만으로 할 수 있는 것
📌 1. 레이아웃 구성
html
복사편집
<div class="box"></div> <style> .box { width: 200px; height: 200px; background-color: skyblue; } </style>
- 정사각형 박스를 만들고 색칠
- 버튼, 카드, 배너 등 웹 페이지 UI 대부분은 CSS로 가능
📌 2. 간단한 애니메이션
css
복사편집
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation: slide 1s infinite alternate; }
- 요소를 움직이는 애니메이션 가능
📌 3. 그림자, 둥근 모서리, 그라디언트 등 스타일 효과
css
복사편집
.box { border-radius: 20px; box-shadow: 0 0 10px gray; background: linear-gradient(to right, red, yellow); }
- 그림자, 모서리 둥글게, 색 그라디언트 등 쉽게 가능
📌 4. 반응형 디자인
css
복사편집
@media (max-width: 600px) { .box { width: 100%; } }
- 화면 크기에 따라 레이아웃 바꾸기
❌ CSS만으로는 불가능한 것들
CSS는 “꾸미기”가 목적이기 때문에,
동적인 픽셀 단위 조작이나 게임 구현 같은 건 못 합니다.
✅ 반드시 Canvas를 써야 하는 것들
📌 1. 복잡한 게임
javascript
복사편집
// 캔버스에 공을 그리며 움직임 ctx.beginPath(); ctx.arc(ballX, ballY, radius, 0, Math.PI * 2); ctx.fill();
- 공 튕기기, 충돌 판정, 애니메이션 등은 CSS로는 불가능
- 예: 테트리스, 브레이크아웃, 슈팅 게임 등
📌 2. 그래프/차트 그리기
- 실시간 데이터 그래프, 파이차트 등
- 각도를 계산해서 직접 그려야 함
javascript
복사편집
ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, startAngle, endAngle); ctx.fill();
📌 3. 이미지 처리 (픽셀 단위)
- 사진 필터, 모자이크, 색상 조절 등
- 이미지를 가져와서 픽셀 하나하나 분석하거나 바꾸는 작업
javascript
복사편집
let imageData = ctx.getImageData(0, 0, width, height); let pixels = imageData.data; // R, G, B, A 배열
📌 4. 시뮬레이션 & 물리 계산
- 예: 물리 엔진, 입자 효과, 불꽃, 중력 등
- 수학 계산 + 실시간 렌더링이 필요한 작업
✅ 한눈에 비교 표
기능 또는 작업CSS만으로 가능Canvas 필요
| 버튼, 레이아웃 만들기 | ✅ 가능 | ❌ 필요 없음 |
| 간단한 애니메이션 (움직이기, 색 바꾸기) | ✅ 가능 | ❌ 필요 없음 |
| 마우스 따라 그리기 | ❌ 불가능 | ✅ 필요 |
| 게임 만들기 (공 튕기기 등) | ❌ 불가능 | ✅ 필요 |
| 차트, 그래프 | ❌ (한계 있음) | ✅ 필요 |
| 이미지 필터 (흑백, 반전 등) | ❌ 불가능 | ✅ 필요 |
| 픽셀 직접 제어 | ❌ 불가능 | ✅ 필요 |
✅ 결론
질문답변 요약
| CSS만으로는 어느 정도 가능? | 박스 만들고 예쁘게 꾸미고, 애니메이션까지는 OK |
| 어떤 때는 캔버스 써야 해? | 그림을 “그려야 할 때” — 게임, 그래프, 이미지 조작 등 |
| 두 개 같이 써도 돼? | 물론! CSS로 레이아웃 + 캔버스로 내용 표현 |
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| _05_버튼이미지 ~ _09_삼각함수 ( 4 ~ 7 ) (0) | 2025.06.11 |
|---|---|
| _05_버튼이미지 ~ _09_삼각함수 ( 1 ~ 3 ) (1) | 2025.06.11 |
| _01_캔버스클릭원그리기 , _02_캔버스클릭원지우고원그리기 , _03_FPS셋팅 (3) | 2025.06.11 |
| _02_grid , _03_rect , _04_arc , _05_text (1) | 2025.06.11 |
| 01_캔버스요소 => _00_canvas , _01_line (0) | 2025.06.11 |