canvas实现网页底部粒子冒泡动画效果代码-html代码-BFW代码库

canvas实现网页底部粒子冒泡动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现网页底部粒子冒泡动画效果代码

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

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

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

  
  
  
<style>
html, body {
  padding:0;margin:0;
  width:100%;height:100%
}
#fireCanvas {
  width:100%;height:100%;
  position:absolute;
  top:0;
  left:0
}
body {
  background:#152525
}
</style>

  
  
  
</head>

<body translate="no">
  <canvas id="fireCanvas"></canvas>
  
      <script >
const canvas = document.getElementById('fireCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const amount = 50; // Number of sparks
const sizeRate = 0.98; // Rate at which sparks shrink
const speedRate = 1; // Speed of sparks
const windSpeed = 0.1; // Wind speed

const sparks = [];

class Spark {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 5 + 2;
    this.speedX = (Math.random() - 0.5) * speedRate;
    this.speedY = Math.random() * -speedRate;
    this.opacity = 1;
  }

  update() {
 .........完整代码请登录后点击上方下载按钮下载查看