canvas实现可调参数多彩小球碰撞带拖影动画效果代码-html代码-BFW代码库

canvas实现可调参数多彩小球碰撞带拖影动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现可调参数多彩小球碰撞带拖影动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #111;
}

#range-cont {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 99999;
  color: #fff;
}
#range-cont label {
  display: block;
}
</style>



</head>

<body>
  <canvas id="main-canvas"></canvas>
<div id="range-cont">
  <input id="num-of-balls" name="num-of-balls" type="range" value="20" min="4" max="80">
  <label id="range-label" for="num-of-balls">Balls: </label>
  <input id="size-of-balls" name="size-of-balls" type="range" value="20" min="5" max="75">
  <label id="size-label" for="size-of-balls">Size: </label>
</div>

  
      <script >
console.clear();

addEventListener('DOMContentLoaded', () => {
  const canvas = document.querySelector('#main-canvas');
  const c = canvas.getContext('2d');

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

  let balls = [];

  class Ball {
    constructor(x, y, size, xVel, yVel, density, hue) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.xVel = xVel;
      this.yVel = yVel;
  .........完整代码请登录后点击上方下载按钮下载查看