粒子线球运动效果

代码语言:html

所属分类:粒子

代码描述:粒子线球运动效果

代码标签: 效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
}

#canvas {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script>
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomRgbValue() {
  const red = randomIntFromRange(41, 44);
  const green = randomIntFromRange(62, 128);
  const blue = randomIntFromRange(80, 185);

  return `rgba(${red},${green},${blue},1)`;
}

function Particle(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  this.radians = Math.random() * Math.PI * 2;
  this.velocity = 0.05;
  this.distanceFromCenter =
  //this for 2d randomIntFromRange(50, 220);
  // this makes 3D
  { x: randomIntFromRange(20, 220), y: randomIntFromRange(20, 220) };

  this.update = () => {
    //move p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0