核心js代码

<script src="js/TweenMax.min.js"></script>
<script type="text/javascript">
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    paper = new Image(200,200), 
    ink = new Image(75,100), // Dimensions of the viewable area, not the entire sprite-sheet
    numFrames = 7,
    n=0,
    data={};

window.addEventListener("load", function(){
  
  window.addEventListener("touchstart", function(e){
    e.preventDefault();
    setData(e.touches[0].clientX,e.touches[0].clientY);
    setTween();
  });
  
  window.addEventListener("click", function(e){
    setData(e.offsetX,e.offsetY);
    setTween();    
  });
  
  drawBg();
  
  // First run, generate a few drips
  for (var i=0; i<5; i++){
    setData( cw/2-150+200*Math.random(), ch/2-100+200*Math.random() );
    setTween(i/10);
  }
  
});

function setData(inputX,inputY){
  (n<3)? n++ : n=0;
  data = {
      "frame":0,
      "x":inputX,
      "y":inputY,
      "s":75*n,     
      "scale":.7 + Math.random()*.5,  
      "rotate": ( Math.random() * Math.PI * 2 )
    }
}

function setTween(delay=0){
  TweenMax.to(data, .45, {
      delay:delay,
      frame:numFrames,
      ease:SteppedEase.ease.config(numFrames),
      onUpdate:run,
      onUpdateParams:[data]
    })
}
</script>