canvas柔和彩色渐变背景动画效果代码-html代码-BFW代码库

canvas柔和彩色渐变背景动画效果代码

代码语言：html

所属分类：背景

代码描述：canvas柔和彩色渐变背景动画效果代码

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

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

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

  
  
<style>
body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }
        canvas {
            display: block;
        }
</style>


  
</head>

<body translate="no">
  <canvas id="wavesCanvas"></canvas>
  
      <script >
class GradientAnimation {
  constructor() {
    this.cnv = document.querySelector(`canvas`);
    this.ctx = this.cnv.getContext(`2d`);

    this.circlesNum = 15;
    this.minRadius = 400;
    this.maxRadius = 400;
    this.speed = .005;

    (window.onresize = () => {
      this.setCanvasSize();
      this.createCircles();
    })();
    this.drawAnimation();

  }
  setCanvasSize() {
    this.w = this.cnv.width = innerWidth * devicePixelRatio;
    this.h = this.cnv.height = innerHeight * devicePixelRatio;
    this.ctx.scale(devicePixelRatio, devicePixelRatio);
  }
  createCircles() {
    this.circles = [];
    for (let i = 0; i < this.circlesNum; ++i) {
      this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
    }
  }
  drawCircl.........完整代码请登录后点击上方下载按钮下载查看