🪵 4. 캔버스 활용하여 불규칙 패턴 & 커스터마이징 커서 제작

개요

• Canvas 에 배경에 불규칙한 지그재그 패턴을 그리고, 꼬리가 길게 이어지는 커스터마이징 커서를 제작해봅니다.
• 참고 : 갈틱폰

패턴 만들기

• pattenrs 폴더에 사용할 이미지 소스들을 저장합니다.

  • pattern-n : 랜덤으로 찍어낼 패턴 파츠

  • particle-n : 파츠 사이에 찍어낼 파티클 파츠

    

• 상수

  export const SIZE = 55; // 이미지 크기
  export const GAP = 40; // 이미지와 이미지 사이 간격
  export const OFFSET = SIZE; // 홀수 줄 오른쪽으로 당기는 간격 (체스판 모양으로 배치)
  export const PARTICLE_SIZE = SIZE / 3; // 파티클 이미지 사이즈
  
  export const RANDOM_POINT_RANGE_WIDTH = 20; // 이미지 가로 이동에 붙일 랜덤 보정치 범위 
  export const RANDOM_POINT_RANGE_HEIGHT = 30; // 이미지 세로 이동에 붙일 랜덤 보정치 범위

• 이미지 로드

  • 이미지 경로들을 배열에 담아, promise 객체로 이미지 로딩이 완료되면 draw할 수 있도록 합니다.

        const patterns = [
          pattern_0,
          pattern_1,
          pattern_2,
          pattern_3,
          pattern_4,
          pattern_5,
          pattern_6,
          pattern_7,
          particle_1,
        ]; // 패턴 경로 배열로 저장
    
        const { pattern, particle } = getImageLists(patterns); // 이미지들을 pattern과 particle로 분류해 각 배열로 저장한다.
    
        Promise.all([
          Promise.all(pattern.map((imgData) => new Promise((res) => (imgData.img.onload = res)))),
          Promise.all(particle.map((imgData) => new Promise((res) => (imgData.img.onload = res)))),
        ])
          .then(() => {
            redraw(canvas, cursorCanvas, ctx, pattern, particle); 
            // 이미지 로딩이 끝아면 redraw함수로 패턴을 다시 그려준다.
          })
          .catch((err) => {
            console.error(err);
          });

• resize 이벤트 부착

  • resize 를 붙여 화면 크기가 변할 때마다 패턴을 다시 그리도록 합니다.

      window.addEventListener('resize', handleResize);
      return () => {
        window.removeEventListener('resize', handleResize);
      };

• redraw 함수

  • pattern과 particle 이미지를 랜덤하게 화면에 그려줍니다.
    1. 체스판 모양으로 각 패턴 이미지를 찍을 좌표를 구합니다.
    2. 해당 좌표에 이미지를 찍습니다.
    3. 랜덤 보정치 만큼 상하좌우로 이동시킵니다.

  const redraw = (
    canvas: HTMLCanvasElement,
    ctx: CanvasRenderingContext2D,
    pattern: { img: HTMLImageElement; type: string }[],
    particle: { img: HTMLImageElement; type: string }[],
  ) => {
    canvas.width = canvas.offsetWidth; // 캔버스 크기를 화면 크기로 지정
    canvas.height = canvas.offsetHeight; 
  
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 초기화
    ctx.globalAlpha = 0.3; // 패턴 투명도 지정
  
    const rows = Math.ceil(canvas.height / (SIZE + GAP)); // 세로줄 패턴 수
    const cols = Math.ceil(canvas.width / (SIZE + GAP)); // 가로줄 패턴 수
  
    for (let row = 0; row < rows; row++) {
      for (let col = -1; col < cols; col++) {
        const patternX = col * (SIZE + GAP) + (row % 2 === 0 ? 0 : OFFSET);
        const patternY = row * (SIZE + GAP);
  
        const random1 = Math.random() * 10 - 5; //이미지 사이즈 보정치
  
        ctx.beginPath();
        ctx.save();
        ctx.translate(patternX + SIZE / 2, patternY + SIZE / 2); // 원점 이동
        ctx.rotate(Math.random() * 2 * Math.PI); // 랜덤한 각도로 회전
        ctx.drawImage( // 이미지 드로잉
          pattern[Math.floor(Math.random() * pattern.length)].img, 
          -SIZE / 2 + randomizeWidth(),
          -SIZE / 2 + randomizeHeight(),
          SIZE + random1,
          SIZE + random1,
        );
        ctx.restore();
  
        const random2 = Math.random() * 10 - 5; // 파티클 사이즈 보정치
        const particleX = patternX + SIZE;
        const particleY = patternY + SIZE + (GAP - PARTICLE_SIZE) / 2 + randomizeWidth();
        ctx.save();
        ctx.translate(particleX + PARTICLE_SIZE / 2, particleY + PARTICLE_SIZE / 2);
        ctx.rotate(Math.random() * 2 * Math.PI);
        ctx.drawImage(
          particle[Math.floor(Math.random() * particle.length)].img,
          -PARTICLE_SIZE / 2 + randomizeWidth(),
          -PARTICLE_SIZE / 2,
          PARTICLE_SIZE + random2,
          PARTICLE_SIZE + random2,
        );
        ctx.restore();
        ctx.fill();
      }
    }
  };

패턴 이미지 추출하기

• resize() 함수 호출 후 아래 링크를 덧붙입니다.
• a 태그를 임시로 만들어 다운로드 URL을 설정한 후, click을 트리거 해 이미지를 다운받습니다.

const dataURL = canvas.toDataURL("image/png");

const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png'; // 파일명 설정
link.click();

• 패턴 조각들과 결과 이미지 :

  

커스터마이징 커서 만들기

• 상수

export const CURSOR_WIDTH = 20; // 커서 드로잉 굵기
export const CURSOR_LENGTH = 7; // 커서 꼬리 길이
export const DELETE_INTERVAL = 30; // 꼬리 삭제 주기 (ms). 30ms마다 꼬리 부분의 좌표 하나를 지운다.

• 마우스 핸들러
  • mousemove 이벤트에서 새 좌표가 샘플링 될 때마다 pointsRef 좌표 배열에 저장합니다.

  const handleMouseMove = (e: MouseEvent<HTMLCanvasElement>) => {
    const { canvas } = getCanvasContext(cursorCanvasRef);
    const point = getDrawPoint(e, canvas);
    pointsRef.current.push(point);
  };

  const handleMouseLeave = () => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);
    pointsRef.current.length = 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

• Cursor 애니메이션 (useEffect + requsetAnimationFrame 사용)
  • pointsRef 좌표 배열의 좌표들이 현재 그려질 선이 됩니다.
  • performance.now() 메소드를 활용해 16ms마다 드로잉하고, DELETE_INTERVAL ms마다 꼬리 끝 좌표를 삭제하도록 합니다.

useEffect(() => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);

    const drawAni = () => {
      const now = performance.now();
			
			// 꼬리 드로잉 부
      if (now - drawTimeRef.current > 16 && pointsRef.current.length > 1) {
        if (pointsRef.current.length > CURSOR_LENGTH) pointsRef.current = pointsRef.current.slice(-CURSOR_LENGTH);
        drawTimeRef.current = now;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.globalAlpha = 0.3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = CURSOR_WIDTH;
        ctx.strokeStyle = 'white';

        const points = pointsRef.current;
        points.forEach((point, idx) => {
          if (idx === 0) ctx.moveTo(point.x, point.y);
          else if (idx < points.length - 1) {
            const midX = (points[idx + 1].x + point.x) / 2;
            const midY = (points[idx + 1].y + point.y) / 2;
            ctx.quadraticCurveTo(point.x, point.y, midX, midY); //2차 스플라인으로 드로잉
          } else {
            ctx.lineTo(point.x, point.y);
            ctx.stroke();
          }
        });
      }

			// 꼬리 좌표 삭제 부
      if (now - deleteTimeRef.current > DELETE_INTERVAL && pointsRef.current.length > 1) {
        pointsRef.current.shift();
        deleteTimeRef.current = now;
      }

      requestAnimationFrame(drawAni);
    };

    cursorAnimation.current = requestAnimationFrame(drawAni);

    return () => {
      if (cursorAnimation.current) cancelAnimationFrame(cursorAnimation.current);
    };
  }, []);

패턴 & 커서 제작 전체 코드

• 패턴과 커스터마이징 커서를 만든 전체 코드입니다.
• 패턴의 경우, 캔버스에서 추출한 이미지를 css background에 삽입하는 방식으로 변경되어 로직에서 삭제되었습니다.

import { useEffect, useRef, MouseEvent } from 'react';
import { Point } from '@troublepainter/core';
import particle_1 from '@/assets/patterns/particle-1.png';
import pattern_0 from '@/assets/patterns/pattern-0.png';
import pattern_1 from '@/assets/patterns/pattern-1.png';
import pattern_2 from '@/assets/patterns/pattern-2.png';
import pattern_3 from '@/assets/patterns/pattern-3.png';
import pattern_4 from '@/assets/patterns/pattern-4.png';
import pattern_5 from '@/assets/patterns/pattern-5.png';
import pattern_6 from '@/assets/patterns/pattern-6.png';
import pattern_7 from '@/assets/patterns/pattern-7.png';
import {
  CURSOR_LENGTH,
  CURSOR_WIDTH,
  DELETE_INTERVAL,
  GAP,
  OFFSET,
  PARTICLE_SIZE,
  RANDOM_POINT_RANGE_HEIGHT,
  RANDOM_POINT_RANGE_WIDTH,
  SIZE,
} from '@/constants/backgroundConstants';
import { getCanvasContext } from '@/utils/getCanvasContext';
import { getDrawPoint } from '@/utils/getDrawPoint';

type ImgType = 'particle' | 'pattern';

interface PatternData {
  img: HTMLImageElement;
  type: ImgType;
}

interface patterns {
  pattern: PatternData[];
  particle: PatternData[];
}

const randomizeWidth = () => Math.random() * RANDOM_POINT_RANGE_WIDTH - RANDOM_POINT_RANGE_WIDTH / 2;
const randomizeHeight = () => Math.random() * RANDOM_POINT_RANGE_HEIGHT - RANDOM_POINT_RANGE_HEIGHT / 2;

const redraw = (
  canvas: HTMLCanvasElement,
  cursorCanvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  pattern: { img: HTMLImageElement; type: string }[],
  particle: { img: HTMLImageElement; type: string }[],
) => {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  cursorCanvas.width = canvas.offsetWidth;
  cursorCanvas.height = canvas.offsetHeight;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = 0.3;

  const rows = Math.ceil(canvas.height / (SIZE + GAP));
  const cols = Math.ceil(canvas.width / (SIZE + GAP));

  for (let row = 0; row < rows; row++) {
    for (let col = -1; col < cols; col++) {
      const patternX = col * (SIZE + GAP) + (row % 2 === 0 ? 0 : OFFSET);
      const patternY = row * (SIZE + GAP);

      const random1 = Math.random() * 10 - 5;

      ctx.beginPath();
      ctx.save();
      ctx.translate(patternX + SIZE / 2, patternY + SIZE / 2);
      ctx.rotate(Math.random() * 2 * Math.PI);
      ctx.drawImage(
        pattern[Math.floor(Math.random() * pattern.length)].img,
        -SIZE / 2 + randomizeWidth(),
        -SIZE / 2 + randomizeHeight(),
        SIZE + random1,
        SIZE + random1,
      );
      ctx.restore();

      const random2 = Math.random() * 10 - 5;
      const particleX = patternX + SIZE;
      const particleY = patternY + SIZE + (GAP - PARTICLE_SIZE) / 2 + randomizeWidth();
      ctx.save();
      ctx.translate(particleX + PARTICLE_SIZE / 2, particleY + PARTICLE_SIZE / 2);
      ctx.rotate(Math.random() * 2 * Math.PI);
      ctx.drawImage(
        particle[Math.floor(Math.random() * particle.length)].img,
        -PARTICLE_SIZE / 2 + randomizeWidth(),
        -PARTICLE_SIZE / 2,
        PARTICLE_SIZE + random2,
        PARTICLE_SIZE + random2,
      );
      ctx.restore();
      ctx.fill();
    }
  }
};

/*
const getPatternType = (src: string): ImgType => {
  const paths = src.split('/');
  const type = 'pattern';
  if (!(type === 'pattern' || type === 'particle')) throw new Error('파츠 파일명이 잘못되었음.');
  debugger;
  return type;
};
*/

const getImageLists = (patterns: string[]): patterns => {
  const lists: patterns = {
    pattern: [],
    particle: [],
  };

  patterns.forEach((src, idx) => {
    const img = new Image();
    img.src = src;
    const type = idx === patterns.length - 1 ? 'particle' : 'pattern';

    //const type = getPatternType(/*src*/);

    lists[type as keyof patterns].push({ img, type });
  });

  return lists;
};

const Background = ({ className }: { className: string }) => {
  const bgCanvasRef = useRef<HTMLCanvasElement>(null);
  const cursorCanvasRef = useRef<HTMLCanvasElement>(null);

  const cursorAnimation = useRef<number>();

  const pointsRef = useRef<Point[]>([]);

  const drawTimeRef = useRef(performance.now());
  const deleteTimeRef = useRef(performance.now());

  // 패턴 찍기
  useEffect(() => {
    const { canvas, ctx } = getCanvasContext(bgCanvasRef);
    const { canvas: cursorCanvas } = getCanvasContext(cursorCanvasRef);

    const patterns = [
      pattern_0,
      pattern_1,
      pattern_2,
      pattern_3,
      pattern_4,
      pattern_5,
      pattern_6,
      pattern_7,
      particle_1,
    ];
    /* 
    const patterns_vite: Record<string, { default: string }> = import.meta.glob('@/assets/patterns/*.png', {
      eager: true,
    });
    const patterns = Object.values(patterns_vite).map((module) => module.default);
*/
    const { pattern, particle } = getImageLists(patterns);

    Promise.all([
      Promise.all(pattern.map((imgData) => new Promise((res) => (imgData.img.onload = res)))),
      Promise.all(particle.map((imgData) => new Promise((res) => (imgData.img.onload = res)))),
    ])
      .then(() => {
        redraw(canvas, cursorCanvas, ctx, pattern, particle);
      })
      .catch((err) => {
        console.error(err);
      });

    const handleResize = () => {
      redraw(canvas, cursorCanvas, ctx, pattern, particle);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // 커서 그리기
  useEffect(() => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);

    const drawAni = () => {
      const now = performance.now();

      if (now - drawTimeRef.current > 16 && pointsRef.current.length > 1) {
        if (pointsRef.current.length > CURSOR_LENGTH) pointsRef.current = pointsRef.current.slice(-CURSOR_LENGTH);
        drawTimeRef.current = now;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.globalAlpha = 0.3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = CURSOR_WIDTH;
        ctx.strokeStyle = 'white';

        const points = pointsRef.current;
        points.forEach((point, idx) => {
          if (idx === 0) ctx.moveTo(point.x, point.y);
          else if (idx < points.length - 1) {
            const midX = (points[idx + 1].x + point.x) / 2;
            const midY = (points[idx + 1].y + point.y) / 2;
            ctx.quadraticCurveTo(point.x, point.y, midX, midY);
          } else {
            ctx.lineTo(point.x, point.y);
            ctx.stroke();
          }
        });
      }

      if (now - deleteTimeRef.current > DELETE_INTERVAL && pointsRef.current.length > 1) {
        pointsRef.current.shift();
        deleteTimeRef.current = now;
      }

      requestAnimationFrame(drawAni);
    };

    cursorAnimation.current = requestAnimationFrame(drawAni);

    return () => {
      if (cursorAnimation.current) cancelAnimationFrame(cursorAnimation.current);
    };
  }, []);

  const handleMouseMove = (e: MouseEvent<HTMLCanvasElement>) => {
    const { canvas } = getCanvasContext(cursorCanvasRef);
    const point = getDrawPoint(e, canvas);
    pointsRef.current.push(point);
  };

  const handleMouseLeave = () => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);
    pointsRef.current.length = 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

  return (
    <div className={className}>
      <canvas ref={bgCanvasRef} className="absolute h-full w-full" />
      <canvas
        ref={cursorCanvasRef}
        className="absolute h-full w-full cursor-none"
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      />
    </div>
  );
};

export default Background;

background.tsx 최종 코드

• 커스터마이징 커서만 구현된 최종 코드로 구현 완료하였습니다.

import { useEffect, useRef, MouseEvent } from 'react';
import { Point } from '@troublepainter/core';
import { CURSOR_LENGTH, CURSOR_WIDTH, DELETE_INTERVAL } from '@/constants/backgroundConstants';
import { getCanvasContext } from '@/utils/getCanvasContext';
import { getDrawPoint } from '@/utils/getDrawPoint';

const Background = ({ className }: { className: string }) => {
  const cursorCanvasRef = useRef<HTMLCanvasElement>(null);
  const cursorAnimation = useRef<number>();

  const pointsRef = useRef<Point[]>([]);

  const drawTimeRef = useRef(performance.now());
  const deleteTimeRef = useRef(performance.now());

  const currentTimestamp = useRef(performance.now());
  const lastTimestamp = useRef(performance.now());

  // 커서 그리기
  useEffect(() => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);

    const handleResize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    const drawAni = () => {
      const now = performance.now();

      if (now - drawTimeRef.current > 16 && pointsRef.current.length > 1) {
        if (pointsRef.current.length > CURSOR_LENGTH) pointsRef.current = pointsRef.current.slice(-CURSOR_LENGTH);
        drawTimeRef.current = now;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.globalAlpha = 0.3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = CURSOR_WIDTH;
        ctx.strokeStyle = 'white';

        const points = pointsRef.current;
        points.forEach((point, idx) => {
          if (idx === 0) ctx.moveTo(point.x, point.y);
          else if (idx < points.length - 1) {
            const midX = (points[idx + 1].x + point.x) / 2;
            const midY = (points[idx + 1].y + point.y) / 2;
            ctx.quadraticCurveTo(point.x, point.y, midX, midY);
          } else {
            ctx.lineTo(point.x, point.y);
            ctx.stroke();
          }
        });
      }

      if (now - deleteTimeRef.current > DELETE_INTERVAL && pointsRef.current.length > 1) {
        pointsRef.current.shift();
        deleteTimeRef.current = now;
      }

      requestAnimationFrame(drawAni);
    };

    cursorAnimation.current = requestAnimationFrame(drawAni);

    return () => {
      if (cursorAnimation.current) cancelAnimationFrame(cursorAnimation.current);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const handleMouseMove = (e: MouseEvent<HTMLCanvasElement>) => {
    currentTimestamp.current = performance.now();
    if (currentTimestamp.current - lastTimestamp.current < 16) return;
    lastTimestamp.current = currentTimestamp.current;

    const { canvas } = getCanvasContext(cursorCanvasRef);
    const point = getDrawPoint(e, canvas);
    pointsRef.current.push(point);
  };

  const handleMouseLeave = () => {
    const { canvas, ctx } = getCanvasContext(cursorCanvasRef);
    pointsRef.current.length = 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

  return (
    <div className={className}>
      <canvas
        ref={cursorCanvasRef}
        className="absolute h-full w-full cursor-none"
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      />
    </div>
  );
};

export default Background;