canvas实现水中饮料气泡泡泡上升粒子动画效果代码-html代码-BFW代码库

canvas实现水中饮料气泡泡泡上升粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现水中饮料气泡泡泡上升粒子动画效果代码

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

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

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


  
  
<style>
body {
	background: linear-gradient(#ffbb00, #cb7604) no-repeat center;
	background-size: 100%;
	height: 100dvh;
	width: 100dvw;
	overflow: hidden;
}
</style>


  
  
</head>

<body translate="no">
  
  
      <script >
document.addEventListener("DOMContentLoaded", () => {
  // init
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");
  let particles = [];

  function setCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    particles.length = Math.floor(canvas.width * 1.25);
    for (let i = 0; i < particles.length; i++) {
      particles[i] = new Particle();
    }
  }
  function Particle() {
    // particle data
    this.x = Math.random() * canvas.width;
    this.y = canvas.height;
    this.radius = Math.random() * 3 + 0.5;
    this.color = `rgb(255 255 255 / ${
    Math.round(Math.r.........完整代码请登录后点击上方下载按钮下载查看