💫 복권 긁기 애니메이션

어릴 때 복권을 긁어보진 않았지만 문화상품권 PIN 번호 알려고 많이 긁어봤다.
토스의 복권 긁기 이벤트를 보니 옛날 생각이 났고, 마침 이를 구현해볼 기회가 생겨서 새로운 애니메이션에 도전해보게 되었다.
구현하는 과정에서 배운 점과 문제 해결에 대해 적어보았다.

Canvas API 활용

사용자의 반응(마우스/터치)에 따라 당첨 결과가 보여야 하기 때문에 Canvas API를 활용하였다.

canvas 초기화

먼저 복권 긁기 전 모습을 그려준다. (스타일 코드는 생략하였다.)

<!-- html -->
<div class="wrapper">
	<div class="result">당첨 결과입니다.</div>
	<canvas id="canvans" />
</div>

// javascript
const $canvas = document.getElementById("canvas");
const context = $canvas.getContext("2d");
const WIDTH = 400;
const HEIGHT = 200;
const dpr = window.devicePixelRatio;

const initCanvas = () => {
  $canvas.style.width = `${WIDTH}px`;
  $canvas.style.height = `${HEIGHT}px`;
  $canvas.width = WIDTH * dpr;
  $canvas.height = HEIGHT * dpr;
  context.scale(dpr, dpr);

  // 회색 배경으로 덮기
  context.strokeStyle = "#999";
  context.fillStyle = "#999";
  context.beginPath();
  context.roundRect(0, 0, WIDTH, HEIGHT, 8);
  context.stroke();
  context.fill();

  // 안내 문구 추가
  context.font = "20px sans-serif";
  context.fillStyle = "#000";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText("여기를 긁어보세요", WIDTH / 2, HEIGHT / 2);
};

initCanvas();

화면에 보여졌으면 하는 캔버스의 크기는 400x200인데, 캔버스의 가로, 세로 픽셀에는 보여주고자 하는 길이에 window.devicePixelRatio를 곱한 값을 줬다.
캔버스에서 사용되는 픽셀의 크기와 css 픽셀 크기가 1:1로 일치하지 않을 수 있기 때문에 devicePixelRatio로 각 픽셀이 서로 같도록 조절해주는 것이다.
만약 이런 차이를 해소하지 않으면 Retina 디스플레이와 같은 특정 화면에서 캔버스의 글자 등이 흐릿하게 보일 수 있다.
devicePixelRatio나 픽셀에 대해서 좀 더 알아보고 싶다면 이 글을 한 번 읽어보는 것도 좋다.

사용자 액션 추가

마우스가 눌러졌을 때(터치를 시작할 때), 마우스가 움직일 때(터치하여 움직일 때), 마우스를 뗐을 때(터치를 그만할 때)에 대한 동작을 작성한다.
위 javascript 코드에 추가로 아래 코드를 작성하였다.

// javascript
const ERASE_RADIUS = 30;
const { top: canvasTop, left: canvasLeft } = $canvas.getBoundingClientRect();
let isDrawing = false;

const handleDrawingStart = () => {
	if (!isDrawing) {
		isDrawing = true;
	}
};

const handleDrawing = (event) => {
    if (isDrawing) {
		const { offsetX, offsetY } = event;
        context.save();
        context.globalCompositeOperation = "destination-out";
        context.beginPath();
        context.arc(offsetX, offsetY, ERASE_RADIUS, 0, 2 * Math.PI, false);
        context.fill();
        context.closePath();
        context.restore();
    }
};

const handleDrawingEnd = () => {
    if (isDrawing) {
        isDrawing = false;
    }
};

$canvas.addEventListener("mousedown", handleDrawingStart);
$canvas.addEventListener("mousemove", handleDrawing);
$canvas.addEventListener("mouseup", handleDrawingEnd);

마우스가 눌러지고 뗄 때(터치를 시작하고 끝낼 때)에는 투명한 원을 그릴지 말지를 제어한다.
마우스를 움직이면서(터치한 채로 움직이면서) 투명한 원을 그릴 수 있는 상태라면 투명한 원을 그리는데, context.save()와 context.restore(), context.globalCompositeOperation을 이용하였다.
context.save()는 캔버스의 컨텍스트에 지정된 속성 값을 저장한다.
context.restore()는 가장 최근의 컨텍스트에 지정된 속성 값을 불러온다.
보통 반복적인 드로잉 작업을 할 때나 특정 속성들을 저장해야 할 때 save, restore 메소드를 쓰는 것 같다.
save, restore 함으로써 독립적인 캔버스 컨텍스트를 가져올 수 있기 때문인 거 같다.
context.globalCompositeOperation은 캔버스에 그려진 도형이 겹쳤을 때 어떻게 처리할지를 정할 수 있다.
context.globalCompositeOperation = 'destination-out';은 도형이 겹칠 경우 처음 그려진 도형에서 겹치지 않는 부분만 그린다.
즉, 처음 그려진 도형과 겹치는 부분은 투명하게 처리된다.

임계치 도달 시 자동으로 결과 보여주기

만약 긁을 수 있는 영역의 몇 %를 긁었을 때 자동으로 결과를 보여주면 어떨까?
이 블로그를 참고하여 임계치에 도달하면 긁지 않은 영역도 모두 사라지도록 하였다.
방법은 아래와 같다.
1. 투명한 원들 사이의 간격을 주었을 때, 캔버스에 그릴 수 있는 투명한 원의 최대 개수를 구한다.
2. 투명한 원을 그릴 때 이미 그려진 투명한 원들과의 간격이 임의의 간격보다 클 경우 새로운 배열에 추가한다.
3. 새로운 배열의 요소의 개수가 1에서 구한 최대 개수를 넘으면 투명한 원을 그만 그리고 결과를 보여준다.

// javascript
const ERASE_DISTANCE = ERASE_RADIUS / 2; // 지워진 영역(투명한 원)간 임의 간격
let thresholdOfEraseCount = 0;

const initCanvas = () => {
	// 위 initCanvas 함수에 추가
    
	// 자동으로 결과를 보여줄 임계치 설정
    const col = Math.ceil(WIDTH / (ERASE_RADIUS * 2 + ERASE_DISTANCE));
    const row = Math.ceil(HEIGHT / (ERASE_RADIUS * 2 + ERASE_DISTANCE));
    thresholdOfEraseCount = col * row;
    // 투명한 원이 최대로 그려질 경우를 캔버스에 표현
    for (let i = 0; i < col; i++) {
        for (let j = 0; j < row; j++) {
            context.save();
            context.beginPath();
            context.arc(
                ERASE_RADIUS + i * (ERASE_RADIUS * 2 + ERASE_DISTANCE),
                ERASE_RADIUS + j * (ERASE_RADIUS * 2 + ERASE_DISTANCE),
                ERASE_RADIUS,
                0,
                2 * Math.PI,
                false
            );
            context.fill();
            context.closePath();
            context.restore();
        }
    }
};

400x200 크기의 캔버스에 투명한 원 사이의 간격을 반지름(15)만큼 줄 경우 최대 18개가 그려진다.

2, 3번 과정을 아래 코드로 작성해보았다.
투명한 원 사이의 간격은 중심점과 마우스(터치) 위치로 구하였다.

// javascript
let isRevealed = false;

const drawTransparentCircle = (x, y) => {
    context.save();
    context.globalCompositeOperation = "destination-out";
    context.beginPath();
    context.arc(x, y, ERASE_RADIUS, 0, 2 * Math.PI, false);
    context.fill();
    context.closePath();
    context.restore();

    const checkList = erasedList.filter(({ x: posX, y: posY }) => {
        const distX = posX - x;
        const distY = posY - y;
        return (
          	Math.sqrt(distX * distX + distY * distY) < ERASE_RADIUS + ERASE_DISTANCE
        );
      });
      if (!checkList.length) {
        	erasedList.push({ x, y });
      }
};

const handleDrawing = (x, y) => {
    if (isDrawing) {
        if (erasedList.length < thresholdOfEraseCount) {
            drawTransparentCircle(x, y);
        } else {
            if (!isRevealed) {
                context.clearRect(0, 0, WIDTH, HEIGHT);
                isRevealed = true;
            }
        }
    }
};

참고

HTML Canvas 복권 긁기 효과(scratch, lottery)

[CSS] DPR(Device-pixel-ratio)의 이해