canvas 实现动态背景图

最新推荐文章于 2024-08-28 21:44:39 发布

原创

最新推荐文章于 2024-08-28 21:44:39 发布 · 932 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

该代码示例展示了如何在Vue应用中使用typescript和canvas元素创建一个背景动画。它生成500个随机颜色和大小的点，这些点在画布上移动，当点超出边界时会反弹。

在这里插入图片描述
代码

<template>
  <canvas id="background"></canvas>
</template>

<script lang="ts" setup>
import {
   
    onMounted } from 'vue'
type dot = {
   
   
  x: number
  y: number
  xa: number
  ya: number
  color: string
  radius: number
}

function getRandomNumber(min: number, max: number) {
   
   
  return Math.floor(Math.random() * (max - min + 1)) + min
}

function