Canvas 사용 기본 개요

canvas 태그 사용법

2d 객체들은

const ctx = canvas.getContext("2d");

이후 ctx.명령어로 사용

• ctx.beginPath(); : 그리기 시작 설정
• ctx.closePath(); : 그리기 끝 설정
• ctx.lineTo(350, 100); : 선 만들기 (x, y)
• ctx.fillRect(x, y, width, height); : 네모 만들기
• ctx.strokeRect(x, y, width, height); : 테두리 네모 만들기
• ctx.arc(x, y, width, height, 0, Math.PI, 시계방향(boolean)); : 원 만들기
• ctx.fillStyle = "red"; : 채우기 색깔 조정
• ctx.strokeStyle = "red"; : 테두리 색깔 조정
• ctx.lineWidth = 20; : 테두리 굵기설정
• ctx.lineCap = "round"; : 테두리 끝 둥글게
• ctx.stroke(); : 테두리로 만들기
• ctx.drawImage(객체, x, y, width, height) : 이미지 그려내기
• ctx.clearRect(x, y, w, h) : 캔버스의 해당 좌표값 해당 크기만큼 객체를 지워낸다.
• const @ = new Image(); : 이미지 태그 추가 가능
  @.src = "./img/01.jpg";
• 이미지 추가

const newImg = new Image();
newImg.src = "../img/img_02.jpg";
newImg.addEventListener("load", function() {
ctx.drawImage(newImg, x, y, width, height)
혹은
ctx.drawImage(newImg, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
});

문제는 굳이 이개쌉지랄을 해서 사진을 추가해야 한다는 점,
drawImage 안에는 변수와 나올 x, y 좌표도 적어줘야 한다는 점,
뒤의 dx, dy, dWidth, dHeight 까지 적었다면, 앞에 쓰여지는 값은 이미 나온 사진 안에서 다시 지정하는 좌표값이다.

• 비디오 추가
  애니메이팅 관련 필수코드,
  requestAnimationFrame(재귀함수)

const newVideo = document.createElement("video");
newVideo.src = "../img/vid_running.mp4";
newVideo.muted = "muted";
newVideo.play();
newVideo.addEventListener("load", function(event) {
console.log(event);
});
load : 그냥 불러오기로 발생 근데 왜 발생 안돼지???

newVideo.addEventListener("loadedmetadata", function(event) {
console.log(event);
});
loadedmetadata : 재생시간정보 확인

newVideo.addEventListener("loadeddata", function(event) {
console.log(event);
});
loadeddatas : 동영상 프레임이 조금이라도 준비가 되면 발생

newVideo.addEventListener("canplay", function(event) {
console.log(event);
});
canplay : 동영상 재생시 이벤트 발생

newVideo.addEventListener("canplaythrough", function(event) {
console.log(event);
});
canplaythrough : 동영상 전체가 끊임없이 재생할 수 있을때 발생

let CA;
function videoDraw() {
ctx.drawImage(newVideo, 600, 100, 300, 200);
if(!newVideo.ended) {
CA = requestAnimationFrame(videoDraw);
} else {
cancelAnimationFrame(CA);
}
}

이후 똑같이 drawImage 사용하여 창 만들고 requestAnimationFrame(재귀함수)하여 함수를 계속 실행시켜 애니메이션 재생시킴.

cancelAnimationFrame(requestAnimationFrame(videoDraw)) : 반대로 애니메이션 프레임을 정지시킴.

drawImage 는 원래 한번만 그려주는 명령문이기 때문에 계속 실행시켜서 애니메이팅 하는 원리임
이걸 이용하면 원이 그려지게도 할 수 있는데,
let num; num++ arc 명령어에서 Math.PI * num/100 하고 리퀘스트애니메이션 하면 원이 그려짐