라라리라
2023.11.06 / Step 8 [DOM_Fps세팅] - 코딩 84 일차 본문
FpsTest.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid black;"></canvas>
<div id="textline"></div>
<script src="FpsTest.js"></script>
</body>
</html>
FpsTest.js
function drawCanvas(){
cnt.clearRect(0, 0, myCanvas.width , myCanvas.height);
draw();
if(turn == true){
x += speed;
if(x == myCanvas.width - width) {
if(y == myCanvas.height - height) turn = !turn;
else{
x = 0;
y += height;
}
}
} else {
x -= speed;
if(x == 0){
if(y == 0) turn = !turn;
else{
x = myCanvas.width - width;
y -= height;
}
}
}
}
function draw(){
cnt.beginPath();
cnt.rect(x, y, width, height);
cnt.fillStyle = "lightGreen"
cnt.fill();
cnt.closePath();
}
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let height = 100;
let width = 100;
let x = 0;
let y = 0;
let speed = 2;
let turn = true;
setInterval(drawCanvas, 1);
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() {
// 캔버스를 지운다.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 위 문장을 주석처리 해보면 바로 이해할 수 있다.
// 캔버스를 다시 그린다.
drawRect();
if(check == true){
x += speed;
if(x == 800 - width){
if(y == 500) check = false;
else{
y += height;
x = 0;
}
}
} else if(check == false){
x -= speed;
if(x == 0){
if(y == 0 && x == 0) check = true;
else{
y -= height;
x = 800 - width;
}
}
}
// console.log(x, y , width , height);
// 반복해서 화면을 그리기때문에 콘솔로는 값들을 확인하기가 어렵다.
// 아래와 같이 화면에 적접 출력해서 값을 확인하는 것이 더 편리하다.
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 = "red";
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;
let check = true;
// Frame Per Second
// 1초에 100번 반복해서 호출한다.
/*
1000 ==> 1초
10 ==> 0.01초
*/
setInterval(draw, 1);
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.11.08 / Step 8 [DOM_버튼이미지] - 코딩 86 일차 (0) | 2023.11.08 |
|---|---|
| 2023.11.07 / Step 8 [DOM_포인트인 렉트] - 코딩 85 일차 (0) | 2023.11.07 |
| 2023.11.03 / Step 8 [DOM_canvasDrawArc] - 코딩 83 일차 (0) | 2023.11.03 |
| 2023.11.02 / Step 8 [DOM_canvasMouse] - 코딩 82 일차 (0) | 2023.11.02 |
| 2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차 (1) | 2023.11.01 |