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>
<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";
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>
