confetti实现生日快乐礼花碎纸屑喷射粒子动画效果代码-html代码-BFW代码库

confetti实现生日快乐礼花碎纸屑喷射粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：confetti实现生日快乐礼花碎纸屑喷射粒子动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
  

  
<style>
.confetti{
   max-width: 100%;
   display: block;
   margin: 0 auto;
   user-select: none;
}

body
{
      cursor: pointer;
}
.name
{
     font-weight: 900;
    text-transform: uppercase;
    padding: 36px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 37%;
    color: rebeccapurple;
    font-family: 'Righteous', cursive;
    font-size: 93px;
    letter-spacing: 10px;
    text-shadow: 2px 4px 11px rgb(0 0 0 / 28%);
      -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}
</style>

  
</head>

<body >
  <H3 class="name">Happy Birthday </H3>

<canvas class="confetti" id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/confetti.js"></script>
      <script  >
//-----------Var Inits--------------
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
cx = ctx.canvas.width / 2;
cy = ctx.canvas.height / 2;

let confetti = [];
const confettiCount = 300;
const gravity = 0.5;
const terminalVelocity = 5;
const drag = 0.075;
const colors = [
{ front: 'red', back: 'darkred' },
{ front: 'green', back: 'darkgreen' },
{ front: 'blue', back: 'darkblue' },
{ front: 'yellow', back: 'darkyellow' },
{ front: 'orange', back: 'darkorange' },
{ front: 'pink', back: 'darkpink' },
{ front: 'purple', back: 'darkpurple' },
{ front: 'turquoise', back: 'darkturquoise' }];


//-----------Functions--------------
resizeCanvas = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  cx = ctx.canvas.width / 2;
  cy = ctx.canvas.height / 2;
};

randomRange = (min, max) => Math.random() * (max - min) + min;

initConfetti = () => {
  for (let i = 0; i < confettiCoun.........完整代码请登录后点击上方下载按钮下载查看