[JavaScript] Canvas 활용하기 #2 / clearRect(), 배경이미지 넣기 / 마우스 커서 위치 설정하기

티스토리 뷰

development/html javascript CSS

[JavaScript] Canvas 활용하기 #2 / clearRect(), 배경이미지 넣기 / 마우스 커서 위치 설정하기

Happyoon ~ 2021. 10. 26. 19:39

728x90

이번에는 배경이미지 위에 마우스가 있는 지점에만 이미지가 떠다니도록 구현해보려 한다.

Step 1. 마우스가 있는 point에만 그림이 있도록 코드 수정하기(잔상 없애기)

저번 게시물에서 offset을 활용하여 마우스가 있는 지점마다 이미지가 보이도록 구현했었다.

이번에는 마우스가 있는 그 지점에만 이미지가 있도록 해야하므로 이전 게시물의 코드를 보완해야한다.

우선, 이전 게시물의 코드는 다음과 같다.

이전 코드

canvas.addEventListener("mousemove",function(e){

            context.drawImage(kimImg,e.offsetX-50,e.offsetY-50,100,100);            
            
        });

다음 코드의 결과는 아래와 같다.

보완을 위한 중요한 생각 point는,

위의 코드는 mousemove 이벤트가 일어날 때마다 이미지가 그려지는데,

mousemove가 일어날 때 우선 캔버스를 초기화하고, 그림을 그리면 된다는 것이다.

그래서 다음의 코드를 추가한다.

context.clearRect(0,0,500,500);

이 코드를 추가한 후의 결과물은 아래와 같다.

위의 사진과 같이 잔상없이 잘 출력되는 모습을 볼 수 있다.

Step 2. 배경이미지 넣기

//배경이미지
let backImg = new Image();
backImg.src = "images/background.jpg";
context.drawImage(backImg,0,0,500,500);

캔버스 크기를 꽉 채울 것이기 때문에 매개변수는(0,0,500,500)으로 한다.

배경이미지를 넣고, 마우스로 이미지를 그리면,

canvas.addEventListener("mousemove",function(e){
            
            //배경이미지 그리기
            context.drawImage(backImg,0,0,500,500);
            
            //unit이미지 그리기
            context.drawImage(kimImg,e.offsetX-50,e.offsetY-50,100,100);            
            
        });

"clearRect를 하지 않아도 배경에 가려 여러겹의 사진이 나타나지 않는 모습을 확인"할 수 있다.

위의 코드에서 눈여겨볼 점은 e.offsetX-50과 e.offsetY-50이다.

이전 게시물에서도 말했듯이, 캔버스에서의 좌표는 우상단을 원점으로 하여 우측, 아래로 갈수록 (+), 좌측, 위로 갈수록 (-)이기 때문에 이미지의 폭과 높이인 100의 반인 50만큼을 해주어 이미지의 시작점을 옮겨준다.

여기서 중요한 점은, 원점을 옮기는 것이 아니라, 원점을 기준으로 이미지의 시작 위치(이미지의 우상단)를 생각하는 것이다.

최종 코드는 다음과 같다.

최종 코드

<!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>Step12_canvas2.html</title>

    <style>
        canvas{
            border :1px solid red;

        }

    </style>
</head>
<body>
    <h1>canvas 요소 사용해 보기</h1>
    <!-- 
        글자, 그림, 이미지 등을 javascript를 활용해서 출력할 수 있는 canvas 요소
        속성을 이용해서 가로, 세로 크기를 지정한다.
    -->
    <canvas id = "myCanvas" width = "500" height = "500"></canvas>
    <script>
        //canvas의 참조값 얻어오기
        let canvas = document.querySelector("#myCanvas");
        //canvas에 그림을 그릴 수 있는 도구(context)의 참조값 얻어오기
        let context = canvas.getContext("2d");
        
    
        //이미지 객체를 생성하고
        let kimImg = new Image();
        //이미지 로딩을 시작한다.
        kimImg.src = "images/kim1.png";
        
        //배경이미지
        let backImg = new Image();
        backImg.src = "images/background.jpg";

    

        canvas.addEventListener("mousemove",function(e){
            //사각형 영역 clear
            //context.clearRect(0,0,500,500);//
            
            //배경이미지 그리기
            context.drawImage(backImg,0,0,500,500);
            
            //unit이미지 그리기
            context.drawImage(kimImg,e.offsetX-50,e.offsetY-50,100,100);            
            
        });

    </script>
</body>
</html>

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] audio (0)	2021.10.26
[JavaScript] Canvas 활용하기 (0)	2021.10.26
[JavaScript] JSON / JSON.parse(), JSON.stringify() (0)	2021.10.19
[JavaScript] this 복습하기 / EventListener에서의 this (0)	2021.10.19
[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random() (0)	2021.10.19

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

yoon's Devlog

티스토리 뷰