캔버스 #01 애니메이션 중지, 이미지

캔버스

애니메이션 멈추기

• return 이용, 내부에서 실행할때
• cancelAnimationFrame 이용, 외부에서 실행할때
• clearInterval, setInterval로 구현시

function draw() {
    count++;

    if(count%30 === 0){
        // 기존 원 지우기 : 빼먹으면 잔상 다 그려짐
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        // 새로 원 그리기
        context.arc(xPos, 150, 5, 0, Math.PI*2, false);
        context.fill();
        xPos += 5;
    }

    // $1. 애니메이션 멈추는 방법 -> return 이용, 내부에서 실행할때
    if(xPos >= canvas.width-10) return;

    // 그릴 함수를 콜백으로 계속 호출한다.
    timeId = requestAnimationFrame(draw);

    // if(xPos >= canvas.width-10) cancelAnimationFrame(timeId);
}
draw();

canvas.addEventListener('click', () => {
    // $2. 애니메이션 멈추는 방법 -> cancelAnimationFrame 이용, 외부에서 실행할때
    cancelAnimationFrame(timeId);
});

이미지 사용하기

drawImage(image, dx, dy);

• 이미지 크기 그대로 좌표에 배치함

drawImage(image, dx, dy, dWidth, dHeight);

• 이미지 크기를 변경해서 좌표에 배치함

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• 이미지 내부에서 크롭해서 가져옴

결과이미지

const imgElem = new Image();
imgElem.src = '../images/ilbuni1.png';
// 이미지 객체를 불러오고 나서야 그리는 것이 가능
imgElem.addEventListener('load', () => {
    context.drawImage(imgElem, 50, 50);
    // 매개변수 5개(이미지객체, 배치할좌표X, 배치할Y좌표, 너비, 높이)
    context.drawImage(imgElem, 50, 50, 70, 120);
    // 매개변수 9개(이미지객체, 땡길X좌표[크롭], 땡길Y좌표[크롭], 가져올너비, 가져올높이,
    // 배치할좌표X, 배치할Y좌표, 너비, 높이);
    context.drawImage(imgElem, 50, 50, 200, 200, 100, 300, 100, 100);
});

클릭한 위치에 그리기

click의 event 객체의 속성

• clientY : 브라우저 기준 클릭한 y좌표
• layerY : 캔버스 기준 클릭한 y좌표

let drawingMode; // true일때만 그리기

function downHandler(e) {
    drawingMode = true;
}

function upHandler(e) {
    drawingMode = false;
}

// 클릭한 위치에 그림그리기
function moveHandler(e) {
    if(!drawingMode) return;

    context.beginPath();
    context.arc(e.layerX, e.layerY, 10, 0, Math.PI*2, false);
    context.fill();
}

canvas.addEventListener('mousedown', downHandler);
canvas.addEventListener('mousemove', moveHandler);
canvas.addEventListener('mouseup', upHandler);

이미지 저장하기

canvas.toDataURL(이미지확장자)

• 캔버스 객체의 url을 가져올수 있음
• image 객체에 src에 넣으면 캔버스를 그림으로 출력가능

const url = canvas.toDataURL('image/png');
const imgElem = new Image();
imgElem.src = url;

https://www.youtube.com/watch?v=ovf8cbKtBH0&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc&index=2