[JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect
canvas 요소의 모든 것! #2
오늘은 canvas에 이미지를 활용해 봅시다.
- [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 보러가기
<canvas id="myCanvas" width="500" height="500"></canvas>// canvas 의 참조값 얻어오기
let canvas=document.querySelector("#myCanvas");
// canvas 에 그림을 그릴수 있는 도구(context) 의 참조값 얻어오기
let context=canvas.getContext("2d");canvas를 사용하기 위해서 참조값을 받아옵니다.
//이미지 객체를 생성하고
let kimImg = new Image();
//이미지 로딩을 시작한다.
kimImg.src = "images/kim1.png";
//로딩이 완료되면 실행할 함수 등록
kimImg.onload=function(){
//canvas에 그리기 .drawImage(이미지, x, y, width, height)
context.drawImage(kimImg, 200,200,100,100);
};이미지 객체를 생성하고 로딩을 해줍니다. 로딩이 끝나면 drawImage를 사용하여 canvas에 그려줍니다.
크기가 500,500인 canvas에서 x=200,y=200 인 지점에서 이미지크기를 100,100으로 잡았기 때문에 이미지는 캔버스의 가운데에 위치하게 됩니다.
실행하면 이렇게 나오게 됩니다.
마우스가 움직이면 이미지가 마우스커서에 따라오게 만들수도 있습니다!
canvas.addEventListener("mousemove", function(e){
context.drawImage(kimImg, e.offsetX-50, e.offsetY-50, 100, 100);
});이렇게 canvas에 이벤트리스너를 추가해주고 이미지를 계속해서 그리면 됩니다. x,y의 좌표는 offset을 사용합니다.
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
이렇게 마우스 커서에 따라 움직이는 이미지가 완성됩니다.
그런데 매번 저런식으로 잔상이 남으면 안되겠죠?
당연히 잔상이 남지 않게 만들수도 있습니다!
canvas.addEventListener("mousemove", function(e){
//사각형 영역 clear
context.clearRect(0, 0, 500, 500);
//unit 이미지 그리기
context.drawImage(kimImg, e.offsetX-50, e.offsetY-50, 100, 100);
});context.clearRect()으로 배경이미지를 마우스가 움직일때마다 clear해주고 초기화된 배경에서 마우스의 위치에 이미지를 그려줍니다.
이렇게 깨끗한 화면을 볼 수 있습니다!
이제 배경을 적용하는 방법을 알아봅시다!
//배경이미지
let backImg=new Image();
backImg.src="images/background.jpg";이미지 객체 로딩하고 나서 배경이미지를 로딩하는 코드를 작성해줍니다.
canvas.addEventListener("mousemove", function(e){
//배경이미지 그리기
context.drawImage(backImg, 0, 0, 500, 500);
//unit 이미지 그리기
context.drawImage(kimImg, e.offsetX-50, e.offsetY-50, 100, 100);
});clear하는 대신에 배경이미지를 그리고 그 위에 이미지를 그려줍니다.
배경화면이 적용된 모습을 볼 수 있습니다!
[전체코드]
<!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>