반응형
- _05_버튼이미지
- 이미지들을 보면. 이렇게 있는 이미지가 많다.
- 이미지 로드가 네트워크를 많이 잡아 먹는다.
- 한장에 하나씩 그림이 있으면 그리기 편한데.
- 한장에 여러개가 있으면. 이 그림을 잘라서 쓴다. 이런 경우가 꽤 많다.
- 아이콘 이미지들은 따로 있는게 아니라. 하나에 있는 가능성이 높다.
- 자르는것을 배워야 한다.
- 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); //drawImage?//// 캔버스에 그리기//ctx.drawImage(...)는 이미지가 완전히 로드된 이후에만 제대로 동작함// → 그래서 지금처럼 바로 draw()를 실행하면 이미지가 아직 안 로드돼서 안 보일 수 있음//0, 0 시작위치.| img1.width, img1.height 가로 세로
ctx.drawImage(img1,0,150,img1.width * 2, img1.height);ctx.drawImage(img1,0,400,img1.width / 2, img1.height);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(); // 새 이미지 객체 생성//new Image()는 브라우저에게 "이 이미지를 메모리에 로드해줘"라고 요청하는 것
img2 = new Image();img1.src = "./BTN_Brown.png"; // 이미지 경로 저장//img.src = ...는 로드할 이미지 경로를 설정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(...)는 캔버스에 이미지를 그리는 함수ctx.drawImage(img, 0, 0, img.width, img.height); //drawImage()는 총 5개의 인자를 받습니다:
/*drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);*/
//자르는 것을 보통 소스라고 한다. 그래서 보통 s가 붙는다.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); //들어가는 값 9개//sx, sy, sWidth, sHeight => 자르는 위치 . 잘라서//dx, dy, dWidth, dHeight => 그리는 위치 . 여기다가 그린다.
}
//-------------------------------------------------let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");
let img = new Image(); // 이미지 생성 . 이미지 객체//img는 자바스크립트 내장 객체인 HTMLImageElement입니다.//이미지를 브라우저가 로드하면, 이 객체에 자동으로 width, height 정보가 채워져요.//ctx.drawImage(img, 0, 0, img.width, img.height); => 어떻게 변수를 설정을 안했는데. 위치를 아느냐.//img.width는 HTMLImageElement 객체의 속성(property) 이기 때문에 자동으로 존재해요.
img.src = "./chess_640.png"; // 이미지 경로 저장
setInterval(draw, 10); //draw() 함수를 10밀리초마다 반복해서 실행하라는 뜻입니다.
- 버튼
- 버튼에는 4가지가 있어야 한다.
- 다았을때. 누를때. 뗄때.
- 버튼
- 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
//draw()는 캔버스에 버튼과 텍스트를 그리는 함수입니다.// setInterval(draw, 10); 등으로 계속 반복 호출됩니다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) => {//사용자가 마우스를 움직일 때마다 실행되는 함수를 등록합니다.// event 객체에는 마우스 위치 등 정보가 담겨 있습니다.
let mx = event.clientX - ctx.canvas.offsetLeft;let my = event.clientY - ctx.canvas.offsetTop;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는 이제 비어 있는 <img> 객체이고, 이미지를 동적으로 불러올 수 있습니다.
img.src = "BTN_Gray.png";let buttonText = "OVER";
setInterval(draw, 10);
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| 03_캔버스키보드 (2) | 2025.06.12 |
|---|---|
| _05_버튼이미지 ~ _09_삼각함수 ( 4 ~ 7 ) (0) | 2025.06.11 |
| _04_포인트인렉트 (0) | 2025.06.11 |
| _01_캔버스클릭원그리기 , _02_캔버스클릭원지우고원그리기 , _03_FPS셋팅 (1) | 2025.06.11 |
| _02_grid , _03_rect , _04_arc , _05_text (1) | 2025.06.11 |