라라리라
2023.11.07 / Step 8 [DOM_포인트인 렉트] - 코딩 85 일차 본문
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);
ctx.fill();
if(check){
ctx.fillStyle = "red";
}else{
ctx.fillStyle = "blue";
}
ctx.closePath();
}
window.addEventListener("click", (event) => {
// 캔버스가 화면 왼쪽 상단에서 일정간격 벗어나있다.
// 그 간격만큼 조정한다.
let mx = event.offsetX;
let my = event.offsetY;
if(x < mx && mx < x + width && y < my && my < y + height){
check= true;
}else{
check= false;
}
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);
pointtest.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>
<script src="pointtest.js"></script>
</body>
</html>
pointtest.js
function drawrect (){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
draw();
}
function draw(){
cnt.beginPath();
cnt.rect(x , y, size, size);
cnt.fillStyle = colorList[i];
cnt.fill();
cnt.closePath();
}
window.addEventListener("click", (a)=>{
let mx = a.offsetX;
let my = a.offsetY;
if(mx >= x && mx <= x + size && my >= y && my <= y + size){
x = Math.floor(Math.random() * (myCanvas.width - size)) ;
y = Math.floor(Math.random() * (myCanvas.height - size)) ;
i++;
if(i >= 3) i = 0;
}
})
//===================================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let check = false;
let size = 100;
let x = Math.floor(Math.random() * (myCanvas.width - size));
let y = Math.floor(Math.random() * (myCanvas.height - size));
let i = 0;
let colorList = ["red", "green", "blue"];
setInterval(drawrect, 10);
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.11.09 ~ 10 / Step 8 [DOM_사각형 충돌, 리스트, 클릭이동] - 코딩 87~88 일차 (0) | 2023.11.10 |
|---|---|
| 2023.11.08 / Step 8 [DOM_버튼이미지] - 코딩 86 일차 (0) | 2023.11.08 |
| 2023.11.06 / Step 8 [DOM_Fps세팅] - 코딩 84 일차 (0) | 2023.11.06 |
| 2023.11.03 / Step 8 [DOM_canvasDrawArc] - 코딩 83 일차 (0) | 2023.11.03 |
| 2023.11.02 / Step 8 [DOM_canvasMouse] - 코딩 82 일차 (0) | 2023.11.02 |