이전 포스팅을 이어서 작성한 내용입니다.
https://rubbery.tistory.com/47
JavaScript canvas 함수
Javascript canvas 란? canvas를 사용하여 자바스크립트와 html 을 사용하여 그래픽을 그릴 수 있다. html 에서 canvas 태그를 사용하여 작성하고 javascript로 인터페이스를 그려서 조작할 수 있다. canvas 요소
rubbery.tistory.com
JavaScript canvas 함수를 이용하여 mousedown 이벤트가 발생하였을때 총알이 뚫린 이미지를 출력하게 만들어보자.
1. canvas에 로딩할 이미지를 불러온다.
hole.png : 총알 뚫린 이미지
background.jpg : 배경 이미지
2. snipe 의 좌표와 총알 구멍 객체 (object) 를 저장할 배열을 생성해준다.
3. 총알 구멍 이미지를 for 문을 이용하여
이미지 정보를 담고 있는 객체를 불러와 holes[i] 배열에 있는 x,y 좌표를 이용해서 총알 구멍을 그린다.
4. 총알 구멍을 발생시킬 좌표를 mousedown 이용하여 이벤트가 발생한 x,y 좌표를 object에 담고
holes 배열에 저장 시킨다.
<!DOCTYPE html>
<html lang="en">
<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>Step09_example5.html</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>canvas 요소 활용해 보기</h1>
<!-- canvas 요소는 width 와 height 를 속성으로 직접 지정할수 있다.-->
<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
//canvas 요소의 참조값
const canvas=document.querySelector("#myCanvas");
// canvas 에 그림을 그릴 도구 (context) 객체 얻어내기
const context = canvas.getContext("2d");
// canvas 에 그릴 이미지 로딩하기
const snipeImg = new Image();
snipeImg.src = "images/snipe.png";
const holeImg = new Image();
holeImg.src = "images/hole.png";
const backImg = new Image();
backImg.src = "images/background.jpg"
// snipe 의 좌표
let snipeX = 0, snipeY = 0;
// 총알 구멍 객체 (object) 를 저장할 배열
const holes = [];
setInterval(() => {
// 여기 함수 내부는 1/100 초 마다 한번씩 실행된다.
// context.clearRect(0, 0, 800, 500)
// 배경 이미지를 canvas 의 크기에 맞게 그린다.
context.drawImage(backImg, 0, 0, 800, 500);
// 총알 구멍 이미지
for (let i =0; i<holes.length; i++) {
// 1번째 총알 구멍 이미지 정보를 담고 있는 객체를 불러와서
let tmp = holes[i];
// 거기에 담긴 x, y 좌표를 이용해서 총알 구멍을 그린다.
context.drawImage(holeImg, tmp.x-10, tmp.y-10, 20, 20)
}
context.drawImage(snipeImg, snipeX-50, snipeY-50, 100, 100)
}, 10);
// canvas 요소의 mousemove 이벤트 처리
canvas.addEventListener("mousemove", (e)=>{
// 이벤트가 발생한곳의 canvas 내에서의 좌표
snipeX = e.offsetX;
snipeY = e.offsetY;
});
canvas.addEventListener("mousedown", (e)=>{
// 이벤트가 발생한 곳의 좌표를 object 에 담는다
const hole={x:e.offsetX, y:e.offsetY};
// holes 배열에 저장(누적) 시킨다.
holes.push(hole);
})
</script>
</body>
</html>
완성된 전체 스크립트 입니다.
빨간색 영역안에서 로딩한 이미지가 마우스 포인터가 움직이는 곳에 클릭하면 총알 구멍 이미지가 찍힌다.
'JavaScript' 카테고리의 다른 글
| JavaScript canvas 함수(4) (0) | 2023.05.08 |
|---|---|
| JavaScript canvas 함수(3) (0) | 2023.05.04 |
| JavaScript Const (0) | 2023.05.02 |
| JavaScript canvas 함수 (0) | 2023.05.02 |
| JavaScript setInterval, setTimeout 함수 (0) | 2023.05.01 |
