라라리라
2023.11.03 / Step 8 [DOM_canvasDrawArc] - 코딩 83 일차 본문
clicktest.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="800px" style="border: 1px solid black;">
<script src="clicktest.js"></script>
</body>
</html>
clicktest.js
function drawcircle(){
cnt.beginPath();
cnt.rect(x, y, 30, 30);
cnt.fillStyle = "yellow";
cnt.stroke();
cnt.fill();
cnt.closePath();
}
//========================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext(`2d`);
let x = 0;
let y = 0;
let count = 0;
window.addEventListener(`click` , (a)=>{
count++
if(count == 3){ count = 0
cnt.clearRect(0, 0, 800, 800);
}
x = a.offsetX;
y = a.offsetY;
drawcircle();
})
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);
x = event.clientX - ctx.canvas.offsetLeft;
y = event.clientY - ctx.canvas.offsetTop;
drawArc();
});
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.11.07 / Step 8 [DOM_포인트인 렉트] - 코딩 85 일차 (0) | 2023.11.07 |
|---|---|
| 2023.11.06 / Step 8 [DOM_Fps세팅] - 코딩 84 일차 (0) | 2023.11.06 |
| 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 |
| 2023.10.27 / Step 8 [DOM_canvas] - 코딩 78 일차 (0) | 2023.10.27 |