js实现canvas炫酷多彩柔和背景光晕动画效果代码-html代码-BFW代码库

js实现canvas炫酷多彩柔和背景光晕动画效果代码

代码语言：html

所属分类：背景

代码描述：js实现canvas炫酷多彩柔和背景光晕动画效果代码

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

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

<head>

    <meta charset="UTF-8">


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Oswald:400&display=swap" rel="stylesheet">


    <style>
        *{
          margin: 0;
        }
        .canvasTTL p{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%) scale(1.0,1.2);
          text-align: center;
          vertical-align: middle;
          margin: auto;
          letter-spacing: 0px;
          font-family: 'Oswald', sans-serif;
          font-size: 6vw;
          color: #fff;
        }
        @media screen and (max-width: 1024px) {
          .canvasTTL p{
            font-size: 12vw;
          }
        }
        #myCanvas canvas{
          background: #03a9f4;
          height: 100%;
          width: 100%;
          position: absolute;
        }
    </style>


</head>

<body>

    <div id="myCanvas">
        <canvas></canvas>
    </div>
    <div class="canvasTTL">
        <p>GRADIENT</p>
    </div>


    <script>
     (function(){

  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

  var canvas = document.querySelector("canvas");
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight;

  var ctx = canvas.getContext("2d");

  ctx.globalCompositeOperation = "saturation"; //合成方法

  //stats.js
  var stats = new Stats();
document.body.appendChild( stats.domElement );

  var particles = [];

  var pIndex = 0;
  var frameId;


  /*             */
  /*Particle */
  /*            */

  function Particle(color,x,y,circleSize,radius){
    this.color = color;
    this.x = 0;
    this.y = 0;
    this.posX = x;
    this.posY = y;

    this.circleSize = circleSize;

    this.direction = getRandom(-1,1);

    this.wave;
    this.amplitude = getRandom(-50,50);
    this.waveSpeed = getRandom(2,3);
    this.speed = getRandom(1,2);

    particles[pIndex] = this;
    this.id = pIndex;
    pIndex++;

    this.radius = radius;
    this.count = 0;
  };

  Partic.........完整代码请登录后点击上方下载按钮下载查看