canvas实现小蝌蚪游动粒子动画效果代码-html代码-BFW代码库

canvas实现小蝌蚪游动粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现小蝌蚪游动粒子动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ::selection {
      background-color: #ffffff;
      color: #000000;
    }
    body {
      margin: 0;
      padding:0;
      overflow:hidden;
      font-family: "Righteous", sans-serif;
      background-color: #06094a;
    }
    h1 {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 72px;
      text-align: center;
      position: fixed;
      z-index: 500;
      left: 0;
      right: 0;
      top: 50%;
      margin: -36px 0 0 0;
      padding: 0;
      line-height: 0.9;
      mix-blend-mode: exclusion;
    }
    h1 span:nth-child(1) {
      color: #ff3939;
    }
    h1 span:nth-child(2) {
      color: #badcff;
    }
    @media screen and (max-width: 568px) {
      h1 {
        margin: -64px 0 0 0;
      }
    }
    </style>
</head>

<body>
    <h1><span>Title</span> <span>Ttile</span></h1>
    <script>
        //Globals
var vWidth = window.innerWidth;
var vHeight = window.innerHeight;
var cns = document.createElement("canvas");
cns.width = vWidth;
cns.height = vHeight;
document.body.appendChild(cns);
var ctx = cns.getContext("2d");
ctx.fillStyle = "rgba(6,9,74,1)";
ctx.fillRect(0, 0, vWidth, vHeight);

//Particles
var particles = new Array();
var Particle = function() {
  this.x =
    Math.round(Math.random() * vWidth) - Math.round(Math.random() * vWidth);
  this.y =
    Math.round(Math.random() * vHeight) - Math.round(Math.random() * vHeight);
  this.hue =
    "#&.........完整代码请登录后点击上方下载按钮下载查看