鼠标跟随下雨的云效果-html代码-BFW代码库

鼠标跟随下雨的云效果

代码语言：html

所属分类：拖放

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #95E0BC;
  padding: 0;
  margin: 0;
}

canvas#canvas {
  background: #95E0BC;
}

span#cloud {
  color: #FFFFFF;
  position: absolute;
}
</style>

</head>
<body translate="no">

<span id="cloud" style="visibility: hidden;"><i class="fas fa-cloud fa-4x"></i></span>
<div id="contents">
<canvas id="canvas">This browser cannot use a canvas.</canvas>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js'></script>
<script>
(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    /********************
        Random Number
      ********************/

    function rand(min, max) {
      return Math.random() * (max - min + 1) + min;
    }

    /********************
        Var
      ********************/

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;

    // water
    var waterNum = 200;
    var waters = [];
    var GRAVITY = 0.1;

    // gras
    var grassNum = 100;
    var grasses = [];
    var growSpeed = -0.1;

    // mouse
    var mouseX = null;
    var mouseY = null;

    // icon
    var cloud = document.getElementById('cloud');

    window.addEventListener('mousemove', function (e) {
      cloud.style.visibility = 'visible';
      cloud.style.left = -40 + mouseX + 'px';
      cloud.style.top = -70 + mouseY + 'px';
    }, false);

    /********************
                 Animation
               ********************/

    window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (cb) {
      setTimeout(cb, 17);
    };

    /********************
         Grass
       ********************/

    function Grass(ctx, x, y) {
      this.ctx = ctx;
      this.init(x, y);
    }

    Grass.prototype.init = function (x, y) {
      this.ctx = ctx;
      this.x = x;
      this.y = y;
      this.m = {
        x: rand(5, 15),
        y: rand(-0, -50) };

      this.h = rand(10, 30);
    };

    Grass.prototype.draw = function () {
      ctx = this.ctx;
      ctx.beginPath();
      ctx.fillStyle = '#42A977';
      ctx.moveTo(this.x, Y);
      ctx.lineTo(this.x + this.m.x, this.y - this.m.y);
      ctx.lineTo(thi.........完整代码请登录后点击上方下载按钮下载查看