canvas啤酒冒泡泡粒子动画效果代码-html代码-BFW代码库

canvas啤酒冒泡泡粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas啤酒冒泡泡粒子动画效果代码

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

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

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

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #2b250a 0%, #000000 100%);
  overflow: hidden;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 350px;
  height: 350px;
  position: absolute;
  border-radius: 100%;
  z-index: -2;
}
@media only screen and (min-width: 1024px) {
  img {
    width: 568px;
    height: 568px;
  }
}
</style>


  
</head>

<body >

<img src="//repo.bfw.wiki/bfwrepo/image/64c851d688fb7.png" alt="">
<canvas id="canvas">
</canvas>


  
      <script  >
console.clear();

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let particlesArr = [];
let numberOfParticles = 3;
let radius;

if (window.innerWidth > 1024) {
  canvas.width = 800;
  canvas.height = 1000;
  radius = 200;
} else {
  canvas.width = 350;
  canvas.height = 550;
  radius = 120;
}

// blueprint za svaki pojedinacni partikl
class Particle {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.size = Math.random() * 3;
    // sluze za random pomeranje partikla koje dodajemo u update funkciji na poziciju kreiranja partikla
    this.directionX = Math.random() * 0.5 - 0.2;
    this.directionY = Math.random() * 0.8 - 0.8;
    this.color = "rgba(223, 218, 220, 0.6)";
    this.deg = M.........完整代码请登录后点击上方下载按钮下载查看