canvas珍珠点击闪耀动画特效-html代码-BFW代码库

canvas珍珠点击闪耀动画特效

代码语言：html

所属分类：动画

代码描述：canvas珍珠点击闪耀动画特效

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

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

<style>
* {
  position:absolute;
}

html, body, #container {
  overflow:hidden;
  background:#000;
  width:100%;
  height:100%;
}
</style>

</head>
<body translate="no">
<canvas id="c"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.2.4.js"></script>
<script>
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),    
    cw = c.width = window.innerWidth,
    ch = c.height = window.innerHeight,
    currentP = 0,
    img1 = new Image(60,60),
    img2 = new Image(60,60),
    img3 = new Image(60,60),
    isTweening = false,
    particles = [],
    Particle = function(index,x,y) { //console.log(index)
      this.img = [img1,img2,img3][gsap.utils.random(0,2,1)];
      this.x = x-this.img.width/2;
      this.y = y-this.img.height/2;
      this.scaleX = this.scaleY = 1;
      this.opacity = 0.5;
      this.draw = function() { //console.log()
        ctx.translate( this.x, this.y );
        ctx.globalAlpha = this.opacity;
        ctx.globalCompositeOperation = "lighter";
        ctx.drawImage(this.img, this.img.width-this.img.width*this.scaleX/2, this.img.height-this.img.height*this.scaleY/2, this.img.width*this.scaleX, this.img.height*this.scaleY)
        ctx.globalAlpha = 1;
        ctx.translate( -this.x, -this.y );        
      }
      this.draw();
    }

img1.src = 'http://repo.bfw.wiki/bfwrepo/icon/5ea395040f95c.png';
img2.src = 'http://repo.bfw.wiki/bfwrepo/icon/5ea395040f95c.png';
img3.src = 'http://repo.bfw.wiki/bfwrepo/icon/5ea395040f95c.png';
img3.onload = window.onresize =.........完整代码请登录后点击上方下载按钮下载查看