2024年06月19日 建站教程
如何利用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>
本文链接：http://so.lmcjl.com/news/6841/