반응형
- 02_캔버스마우스
- _01_캔버스클릭원그리기
- 캔버스를 왜 쓰는가
- 태그 가지고 애니메이션을 표현하는데 만드는것이 한계가 있다.
- css가지고는 한계가 있다. 정교하게 할려면 캔버스에다가 해야한다.
- clickDrawArc.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><canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas><h1>화면을 클릭해보세요.</h1><script src="clickDrawArc.js"></script></body></html>
- clickDrawArc.js
-
function drawArc(){ctx.beginPath();
ctx.arc(x, y, radius, 0, angle);ctx.fillStyle = "blue";ctx.fill();
ctx.closePath();}
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
console.log("캔버스 왼쪽 여백 = " + ctx.canvas.offsetLeft);//offsetLeft =>//여백이 있다. 여백을 빼줘야 한다. 좌표 그릴때. 여백을 빼줘야 한다.//그래야 그림이 정교하게 그려진다.console.log("캔버스 상단 여백 = " + ctx.canvas.offsetTop);
let x = 0;let y = 0;let radius = 40;let angle = Math.PI * 2;
window.addEventListener('click', (event) => {//내가 마우스를 누르면
//캔버스의 시작위치는 모니터의 시작위치와 다르다.//그간격만큼 조정한다.x = event.clientX - ctx.canvas.offsetLeft;//event.clientX => 내가 누른 위치//canvas.offsetLeft => 위치만큼 빼주어야 한다. 여백을 빼주어야 한다.//그래야 정확한 좌표가 된다.y = event.clientY - ctx.canvas.offsetTop;
console.log(event.clientX , ctx.canvas.offsetLeft , x);console.log(event.clientY , ctx.canvas.offsetTop , y);
drawArc();//동그라미를 그려라});
- _02_캔버스클릭원지우고원그리기
- 한번 그리고 지우고 그리고
- 왜 중요한가
- 윈도우가 이 원리로 되어 있다.
- 마우스가 움직인다. 마우스 따라 그림이 계속 움직이는 거다.
- 마우스도 지우고 다시 그리고. 마우스 커서가 움직이는게 지우고 그리고. 그래서 움직이는 것처럼 보이는것
- 움직일때 그리고 지우는것
- 3D 게임
- 캐릭터 .
- 실제로는 이 앞만 그리는거다.
- 실제로는 뒤에가 없다.
- 굉장히 흉측하게 보인다 ㅋㅋ
- 캐릭터 .
- 프로그램 3개 켜져 있다.
- 뒤에 있는 화면은 안 그리는거다.
- 가려진 부분은 화면에서 안 그린다.
- 에너지 낭비
- 리소스를 아끼는것
- C언어를 하면 윈도우에 그림을 그릴 수 있다.
- 바탕화면에 망치질 하면 . 유리깨지는 게임 .
- C언어는 가능하다.
- 바탕화면에 낙서 할 수 있다.
- 게임할 때. 30FPS (프레임)
- 지우고 다시 그리고를 1초에 30번을 한다.
_02_캔버스클릭원지우고원그리기
- clickDrawArc2.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><script src="clickDrawArc2.js"></script></body></html>
- clickDrawArc2.js
-
function drawArc(){ctx.beginPath();
ctx.arc(x, y, radius, 0, angle);ctx.fillStyle = "blue";ctx.fill();
ctx.closePath();}
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
let x = 0;let y = 0;let radius = 50;let angle = Math.PI * 2;
window.addEventListener('click', (event) => {// 클릭할때마다 지우고 다시그린다.ctx.clearRect(0, 0, canvas.width, canvas.height);//clearRect => 지우다.//0, 0, 부터 .//아예 다 지우고 그린다.//---------------------------------------------//그리고x = event.clientX - ctx.canvas.offsetLeft;y = event.clientY - ctx.canvas.offsetTop;drawArc(); //그린다.//이게 윈도우의 원리이다.});
_03_FPS셋팅
- //화면 밖에다가 여러가지 출력한것 . 정보
//이런것으로 화면에
// 아래와 같이 화면에 적접 출력해서 값을 확인하는 것이 더 편리하다.
let testText = document.querySelector(".testText");
testText.innerHTML = ``;
testText.innerHTML += `x : ${x} <br>`;
testText.innerHTML += `y : ${y} <br>`;
testText.innerHTML += `width : ${width} <br>`;
testText.innerHTML += `height : ${height} <br>`; - 이걸로 자신이 코드를 잘 못 짰는지를 찾아야 한다.
- 자신이 디버그를 만들어야 한다.
- 회사에서 디버그를 알려준다.
- 학생은 디버그를 쓰면 안 된다. 디버그를 쓰면 실력이 안는다.
- 디버그
- 어디가 틀리면 알려주는 라이브러리
- 이거 쓰면 멍청이가 된다.
- 자기가 직접 디버그를 해야 한다.
- 웹같은거 쓰면 디버그를 쓰면 편하다.
- 화면이 멈춰있으면 편하다.
- 움직여 있으면 의미가 없다. 움직여 버리니까.
- 인간 디버그가 되야 한다.
- 인간 디버그 훈련을 해야 한다.
- 움직이는것은 절대 못 찾느다.
- 서버는 알려주지도 않는다.
- 2만명
- 2만명이 어떻게 움직이는지 머리로 계산 할 줄 알아야 한다. 실시간으로
- 그래야지 버그를 찾는다.
- 서브는 오류를 알려주지도 않는다.
- 이런거는 경력이 10년이상이 되야 한다.
- 반드시 디버그를 어떻게 할 것인지. 스스로 생각을 해야 한다.
- 프로그래밍
- 10시간
- 만드는 것은 10%
- 9시간은 나머지는 틀린것 찾는거다.
- 틀린것을 찾을 때. AI한테 물어보면 끝이다.
- 오류는 반드시 자기가 찾아야 한다.
- 인간 디버그가 되어야 한다.
- _03_FPS셋팅
- intervalDraw.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><canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas><div class="testText"></div><script src="intervalDraw.js"></script></body></html>
- intervalDraw.js
-
function draw() { //1초에 100번 동작한다.// 캔버스를 지운다.ctx.clearRect(0, 0, canvas.width, canvas.height); //지우고// 위 문장을 주석처리 해보면 바로 이해할 수 있다.
// 캔버스를 다시 그린다.drawRect(); //그리고x += speed ; //이동하고// console.log(x, y , width , height);// 반복해서 화면을 그리기때문에 콘솔로는 값들을 확인하기가 어렵다.
//위의 3개를 계속 반복하는것//--------------------------------------------------//화면 밖에다가 여러가지 출력한것 . 정보//이런것으로 화면에
// 아래와 같이 화면에 적접 출력해서 값을 확인하는 것이 더 편리하다.let testText = document.querySelector(".testText");testText.innerHTML = ``;testText.innerHTML += `x : ${x} <br>`;testText.innerHTML += `y : ${y} <br>`;testText.innerHTML += `width : ${width} <br>`;testText.innerHTML += `height : ${height} <br>`;}
function drawRect(){ctx.beginPath();
ctx.rect(x, y, width, height);ctx.fillStyle = "blue";ctx.fill();
ctx.closePath();}
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
let x = 0;let y = 0;let width = 100;let height = 100;//사각형 위치
let speed = 2; //속도 2
// Frame Per Second// 1초에 100번 반복해서 호출한다./*1000 ==> 1초10 ==> 0.01초*/setInterval(draw, 10); // 100FPS
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| _05_버튼이미지 ~ _09_삼각함수 ( 1 ~ 3 ) (1) | 2025.06.11 |
|---|---|
| _04_포인트인렉트 (0) | 2025.06.11 |
| _02_grid , _03_rect , _04_arc , _05_text (1) | 2025.06.11 |
| 01_캔버스요소 => _00_canvas , _01_line (0) | 2025.06.11 |
| 02_테트리스 (1) | 2025.06.10 |