라라리라
2023.11.08 / Step 8 [DOM_버튼이미지] - 코딩 86 일차 본문
chesstest.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="chesstest.js"></script>
</body>
</html>
chesstest.js
function draw(){
let pawn = chessList[0]
let knight = chessList[1];
let rook = chessList[2];
cnt.drawImage(img1, 0, 0, img1.width, img1.height)
cnt.drawImage(img1, 0, 0, 80, 80, 0, 200, 80, 80);
cnt.drawImage(img1, pawn.x, pawn.y, pawn.size, pawn.size, 120, 200, 80, 80);
cnt.drawImage(img1, knight.x, knight.y, knight.size, knight.size, 240, 200, 80, 80);
cnt.drawImage(img1, rook.x, rook.y, rook.size, rook.size, 360, 200, 80, 80);
}
//===============
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let img1 = null;
let chessList = [
{
"name": "pawn",
"y": 0,
"x": 600,
"size":80
},
{
"name": "knight",
"y": 0,
"x": 480,
"size":80
},
{
"name": "rook",
"y": 0,
"x": 240,
"size":80
},
];
img1 = new Image();
img1.src = "./chess_640.png";
setInterval(draw, 10);
fpsDrawImage.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>
<script src="fpsDrawImage.js"></script>
</body>
</html>
fpsDrawImage.js
function draw() {
// 이미지 그리기
ctx.drawImage(img1, 0, 0 , img1.width, img1.height);
ctx.drawImage(img1, 0, 150 ,img1.width * 2, img1.height * 2);
ctx.drawImage(img1, 0, 400 ,img1.width / 2, img1.height / 2);
ctx.drawImage(img2, 0, 500 , img2.width, img2.height);
}
//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let img1 = null;
let img2 = null;
img1 = new Image(); // 이미지 생성
img2 = new Image(); // 이미지 생성
img1.src = "./BTN_Brown.png"; // 이미지 경로 저장
img2.src = "./BTN_Gray.png"; // 이미지 경로 저장
setInterval(draw, 10);
imageCut.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>
<script src="imageCut.js"></script>
</body>
</html>
imageCut.js
function draw() {
// 이미지 그리기
ctx.drawImage(img, 0, 0, img.width, img.height);
/*
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
*/
let sx = 0; // 이미지 내에서 자르기를 시작할 x축 위치
let sy = 0; // 이미지 내에서 자르기를 시작할 y축 위치
let sWidth = 80; // 시작 x축을 기준으로 자를 이미지의 가로 사이즈
let sHeight = 80; // 시작 y축을 기준으로 자를 이미지의 세로 사이즈
let dx = 0; // 잘라낸 이미지를 캔버스에 그리는(배치하는) 시작 x축 위치
let dy = 300; // 잘라낸 이미지를 캔버스에 그리는(배치하는) 시작 y축 위치
let dWidth = 80; // 잘라낸 이미지를 캔버스에 그려질 이미지의 가로 사이즈
let dHeight = 80; // 잘라낸 이미지를 캔버스에 그려질 이미지의 세로 사이즈
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
sx = 240;
sy = 100;
sWidth = 80;
sHeight = 80;
dx = 0;
dy = 400;
dWidth = 80;
dHeight = 80;
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let img = new Image(); // 이미지 생성
img.src = "./chess_640.png"; // 이미지 경로 저장
setInterval(draw, 10);
mybotton과제.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;">
<script src="mybotton과제.js"></script>
</body>
</html>
mybotton과제.js
function drawbotton(){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height)
draw();
}
function draw(){
cnt.drawImage(img, x, y, img.width, img.height);
cnt.font = "60px Fira"
cnt.fillStyle = "green"
cnt.fillText("over", x+65 , y+60);
cnt.strokeText("over", x+65 , y+60);
}
window.addEventListener("mousemove", (a)=>{
let mx = a.offsetX;
let my = a.offsetY;
if(x < mx && mx < x + img.width && y < my && my < y + img.height){
img.src = "./BTN_Gray.png"
}
else img.src = "./BTN_Brown.png"
})
//============================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let x = 220;
let y = 220;
let width = 100;
let height = 50;
let img = new Image();
img.src = "./BTN_Brown.png"
setInterval(drawbotton, 10);
myButton.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="myButton.js"></script>
</body>
</html>
myButton.js
function draw() {
// 캔버스를 지운다.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 이미지 그리기
ctx.drawImage(img, x, y, width, height);
// 택스트 출력
ctx.font ="30px Fira";
ctx.strokeText(buttonText, x+13, y + 33);
ctx.fillStyle = "rgb(100, 200, 100)";
ctx.fillText(buttonText, x +13, y + 33);
}
// mousemove를 사용해서 버튼을 구현
window.addEventListener('mousemove', (event) => {
let mx = event.offsetX;
let my = event.offsetY;
if(x < mx && mx < x + width && y < my && my < y + height){
img.src = "BTN_Brown.png";
}else{
img.src = "BTN_Gray.png";
}
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 = 50;
let img = new Image();
img.src = "BTN_Gray.png";
let buttonText = "OVER";
setInterval(draw, 10);
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.11.13 / Step 8 [DOM_캔버스키보드] - 코딩 89일차 (0) | 2023.11.13 |
|---|---|
| 2023.11.09 ~ 10 / Step 8 [DOM_사각형 충돌, 리스트, 클릭이동] - 코딩 87~88 일차 (0) | 2023.11.10 |
| 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.03 / Step 8 [DOM_canvasDrawArc] - 코딩 83 일차 (0) | 2023.11.03 |