湿的canvas交互动画特效-html代码-BFW代码库

湿的canvas交互动画特效

代码语言：html

所属分类：动画

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

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

<title> Wet Canvas (Interactive)</title>

<style>
    * {
  overflow: hidden;
  background:#000;
}

canvas {
  display: block;
/*   background:#00e1e9; */
  background:radial-gradient(ellipse at top, #00e1e9 50%, #000 100%);
}
  </style>

</head>
<body translate="no">
<canvas id="c"></canvas>

<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script>
// Customize these...
var n = 300,
    speed = 15,
    startSize = rand(200,500);

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    mousePos = {x:"", y:""},
    img = new Image(),
    particles = [],
    particleNumber = 0,
    Particle = function(index) {
      this.index = index;
      this.dur = (100-rand(9, 90))/speed;
      this.draw = function() {
        ctx.translate( this.x, this.y );
        ctx.globalAlpha = this.alpha;
        ctx.globalCompositeOperation = 'lighter';
        // if (index%1.5==0) ctx.globalCompositeOperation = 'overlay';
        if (index%2==0) ctx.globalCompositeOperation = 'xor';
        ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
        ctx.translate( -this.x, -this.y );
      }
    };

c.onmousemove = function(e){ mousePos = { x:e.clientX, y:e.clientY }; }
document.onmouseleave = function(e){ mousePos = {x:"", y:""} }

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