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.w.........完整代码请登录后点击上方下载按钮下载查看