利用Vue和Canvas实现一个简单的动画效果

如何利用Vue和Canvas实现一个简单右绚丽的y的动画效果，下面web建站小编给大家简单介绍一下具体实现方法！

1、安装脚手架

vue create vue-canvas-animation

2、示例如下：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>

import { onMounted, reactive } from 'vue';
export default {
  name: 'CanvasAnimation',
  setup() {
    const canvasRef = reactive(null); // 用于引用Canvas元素的响应式数据
 
    onMounted(() => {
      const canvas = canvasRef.value;
      const ctx = canvas.getContext('2d'); // 获取Canvas的2D绘图上下文
 
      const drawAnimation = () => {
	requestAnimationFrame(drawAnimation);
		 
	ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
		 
 ​       ​ctx.beginPath();
 ​       ​ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); // 绘制小球
	ctx.fillStyle = ball.color;
	ctx.fill();
		 
	// 移动小球
	ball.x += ball.speedX;
	ball.y += ball.speedY;
		 
	// 碰撞检测
	if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
	  ball.speedX *= -1;
	}
	if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
	  ball.speedY *= -1;
	}
      };
		 
      const ball = {
	x: 100,
	y: 100,
	radius: 20,
	speedX: 2,
	speedY: 1,
	color: '#ff0000',
      };
    });
 
    return {
      canvasRef,
    };
  },
};
</script>