JavaScript 이미지 회전 - JavaScript imiji hoejeon

Question

WEB

목차 Show

[JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate
canvas 요소의 모든 것! #3
1. 커서를 따라오는 이미지 만들기
2. 이미지 회전 모션 추가

[JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate

yo~og 2021. 10. 27. 23:23

canvas 요소의 모든 것! #3

오늘은 커서를 따라오면서 무한으로 회전하는 이미지를 만들어봅시다!

[JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath 보러가기
[JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect 보러가기
[JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate 보러가기

1. 커서를 따라오는 이미지 만들기

먼저 setInterval을 사용하여 커서를 따라오는 이미지를 구현해봅시다.

<canvas id="myCanvas" width="500" height="500"></canvas>

// canvas 의 참조값 얻어오기
let canvas=document.querySelector("#myCanvas");
// canvas 에 그림을 그릴수 있는 도구(context) 의 참조값 얻어오기
let context=canvas.getContext("2d");

먼저 캔버스의 참조값을 얻어옵니다.

//mousemove 이벤트가 일어났을때 실행할 함수 등록
canvas.addEventListener("mousemove",function(e){
      //이벤트가 일어난곳의 좌표를 unitX,unitY에 반영하기
      unitX = e.offsetX;
      unitY = e.offsetY;
})

canvas안의 마우스가 움직일때마다 마우스의 커서위치를 offset으로 가져와주고 unitX,unitY에 저장해줍니다.

offset의 설명은 여기서 볼 수 있습니다. >>> https://e-you.tistory.com/163

[JavaScript] 마우스 x,y 좌표값 구하기 / client / offset / screen

마우스 x,y 좌표값 구하기 좌표의 종류 clientX, clientY : 현재 문서 기준 위치 offsetX, offsetY : 현재 오브젝트 기준 위치 screenX, screenY : 현재 모니터 기준 위치 Step02_event2.html div..

e-you.tistory.com

//이미지 객체를 생성하고 
let kimImg=new Image();
//이미지 로딩을 시작한다.
kimImg.src="images/kim1.png";

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

사용할 이미지와 배경이미지를 생성해줍니다.

setInterval(function(){
      context.drawImage(backImg, 0, 0, 500, 500);

      // context 의 현재상태(정상상태, 변화를 가하지 않은 상태)를 임시 저장한다.
      context.save();
      // 좌표계를 unit 이 있는 위치로 평행 이동한다.
      context.translate(unitX,unitY);
      // 현재 좌표계에 이미지를 원점에 원하는 크기로 그린다.
      context.drawImage(kimImg, 0-50, 0-50, 100, 100);
      // 임시저장된(정상상태)로 context를 복구 시킨다.
      context.restore();

},10)

setInterval은 지정한 밀리초마다 함수를 반복적으로 호출합니다.

자세한 내용은 여기서 볼 수 있습니다. >>> https://e-you.tistory.com/177

[JavaScript] setInterval / clearInterval / 일정시간 주기로 반복 작업하기

setInterval, clearInterval이란 무엇일까요? 😀 setInterval : 지정한 밀리초 주기마다 함수를 반복적으로 호출합니다. clearInterval : setInterval의 실행을 취소할 수 있습니다. 기본 문법 let timer = setI..

e-you.tistory.com

예제는 밀리초를 10으로 지정해주었으니 1초에 100번씩 작동하게 됩니다.

먼저 context.save()로 context의 현재 상태를 저장해줍니다.

context.translate(unitX,unitY)를 사용하여 x,y만큼 평행 이동 해줍니다.

context.drawImage(kimImg, 0-50, 0-50, 100, 100)를 사용하여 이미지를 그려줍니다.

context.restore()을 사용하여 context를 다시 복구시킵니다.

이 작업을 1초에 100번씩 반복하게되면 이미지가 마우스를 따라 움직이는 것으로 보이게 됩니다.

2. 이미지 회전 모션 추가

이제 이미지가 돌아가는 모션을 추가해 보겠습니다.

전의 코드에서 약간의 변화만 주면됩니다.

setInterval(function(){
      context.drawImage(backImg, 0, 0, 500, 500);

      // context 의 현재상태(정상상태, 변화를 가하지 않은 상태)를 임시 저장한다.
      context.save();
      // 좌표계를 unit 이 있는 위치로 평행 이동한다.
      context.translate(unitX,unitY);
      // 좌표계를 회전 시킨다.
      context.rotate(angle*Math.PI/180);
      // 현재 좌표계에 이미지를 원점에 원하는 크기로 그린다.
      context.drawImage(kimImg, 0-50, 0-50, 100, 100);
      // 임시저장된(정상상태)로 context를 복구 시킨다.
      context.restore();

      angle++;
},10)

그 전의 코드에서 rotate만 추가해주었습니다.

context.retate()를 사용하여 context를 angle*Math.PI/180 만큼 회전시켜줍니다.

그리고 angle을 계속해서 더해갑니다.

[전체코드]

<!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_canvas3.html</title>
    <style>
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h2>canvas 요소 사용해 보기</h2>
    <!--
        글자, 그림, 이미지 등을 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";

        let unitX=250;
        let unitY=250;

        let angle=0;

        setInterval(function(){
            context.drawImage(backImg, 0, 0, 500, 500);

            // context 의 현재상태(정상상태, 변화를 가하지 않은 상태)를 임시 저장한다.
            context.save();
            // 좌표계를 unit 이 있는 위치로 평행 이동한다.
            context.translate(unitX,unitY);
            // 좌표계를 회전 시킨다.
            context.rotate(angle*Math.PI/180);
            // 현재 좌표계에 이미지를 원점에 원하는 크기로 그린다.
            context.drawImage(kimImg, 0-50, 0-50, 100, 100);
            // 임시저장된(정상상태)로 context를 복구 시킨다.
            context.restore();

            angle++;
        },10)


        //mousemove 이벤트가 일어났을때 실행할 함수 등록
        canvas.addEventListener("mousemove",function(e){
            //이벤트가 일어난곳의 좌표를 unitX,unitY에 반영하기
            unitX = e.offsetX;
            unitY = e.offsetY;
        })
        
    </script>
</body>
</html>

CSS 이미지 회전 jQuery 이미지 회전 EXIF 이미지 회전 html 이미지 자동회전 javascript image-orientation Canvas 이미지 회전