Canvas API를 Vue.js(Vue 3 + composition API)에서 사용해보자.

---

1. vue.js 프로젝트 생성

• yarn을 통한 vue create 사용

  yarn create vue

  
• 위 안내를 따라서 라이브러리 설치 및 프로젝트 실행

  yarn 
  yarn format 
  yarn dev

2. src/app.vue 수정

• 필요한 부분만 남기고 그 외 부분은 지우기

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

3. src/views/HomeView.vue 수정

• canvas 범위를 지정하고 공을 그려서 공이 화면 가장자리나 마우스 커서에 부딪히면 방향을 바꾸며 움직이는 예제 작성

<template>
  <div>
    <!-- Canvas 엘리먼트에 마우스 이동 이벤트 리스너 추가 -->
    <canvas ref="gameCanvas" :width="width" :height="height" @mousemove="onMouseMove"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const gameCanvas = ref(null) // canvas 엘리먼트 참조
    const width = 800 // canvas의 너비
    const height = 600 // canvas의 높이
    const context = ref(null) // canvas의 2D 렌더링 컨텍스트
    const mouseX = ref(0) // 마우스의 X 좌표
    const mouseY = ref(0) // 마우스의 Y 좌표

    // 공 객체
    const ball = ref({
      x: 50,
      y: 50,
      radius: 10,
      dx: 2,
      dy: 2
    })

    // 공을 그리는 함수
    const drawBall = () => {
      const ctx = context.value
      const { x, y, radius } = ball.value
      ctx.beginPath()
      ctx.arc(x, y, radius, 0, Math.PI * 2)
      ctx.fillStyle = 'blue'
      ctx.fill()
      ctx.closePath()
    }

    // 공과 마우스 포인터 간의 충돌 검사 함수
    const checkCollision = () => {
      const distX = ball.value.x - mouseX.value
      const distY = ball.value.y - mouseY.value
      const distance = Math.sqrt(distX * distX + distY * distY)

      return distance < ball.value.radius
    }

    // 게임 상태를 업데이트하는 함수
    const updateGame = () => {
      const ctx = context.value
      const { x, y, radius, dx, dy } = ball.value

      ctx.clearRect(0, 0, width, height) // canvas를 지웁니다
      drawBall() // 공을 그립니다

      // 공의 위치를 업데이트합니다
      ball.value.x += ball.value.dx
      ball.value.y += ball.value.dy

      // 경계 충돌 감지
      if (ball.value.x + ball.value.radius > width || ball.value.x - ball.value.radius < 0) {
        ball.value.dx = -ball.value.dx
      }
      if (ball.value.y + ball.value.radius > height || ball.value.y - ball.value.radius < 0) {
        ball.value.dy = -ball.value.dy
      }

      // 마우스 충돌 감지
      if (checkCollision()) {
        ball.value.dx = -ball.value.dx
        ball.value.dy = -ball.value.dy
      }

      // 애니메이션 프레임 요청
      requestAnimationFrame(updateGame)
    }

    // 마우스 이동 이벤트 핸들러
    const onMouseMove = (event) => {
      const rect = gameCanvas.value.getBoundingClientRect() // canvas의 위치를 가져옵니다
      mouseX.value = event.clientX - rect.left // 마우스의 X 좌표를 계산합니다
      mouseY.value = event.clientY - rect.top // 마우스의 Y 좌표를 계산합니다
    }

    // 컴포넌트가 마운트될 때 실행되는 함수
    onMounted(() => {
      context.value = gameCanvas.value.getContext('2d') // 2D 렌더링 컨텍스트를 가져옵니다
      updateGame() // 게임 업데이트를 시작합니다
    })

    return {
      gameCanvas,
      width,
      height,
      onMouseMove
    }
  }
}
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>

4. 결과

• https://vue-demo-vert.vercel.app/