canvas星空粒子特效

原创

于 2024-04-18 18:00:00 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #canvas

本文介绍了如何使用Vue.js结合HTML5canvasAPI创建一个具有动态效果的星空粒子动画，包括离屏渲染、颜色渐变和星星运动逻辑。

canvas星空粒子特效

在这里插入图片描述

<template>
  <div>
    <canvas id="star"></canvas>
  </div>
</template>

<script setup lang="ts">
import {
   
    onMounted } from 'vue'


function maxOrbit(x, y) {
   
   
  let max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
}

function random(min, max?: number) {
   
   
  if(arguments.length < 2) {
   
   
    max = min;
    min = 0;
  }

  if(min > max) {
   
   
    let hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const</