小编eas*_*aby的帖子

我正在尝试重新创建此效果，但是我希望将此效果放在画布中，基本上是使用循环使用淡入效果绘制正方形。循环部分还可以，我不知道是淡入淡出的效果。我正在使用requestAnimationFrame，每次重绘时，globalAlpha都会增加，旧的squre将被删除，而新的将会被绘制。这是功能：

function renderSquare(x, y) {

requestID = requestAnimationFrame(renderSquare);
alpha = requestID/100;  

ctx.clearRect(x,y,size,size);
ctx.globalAlpha = alpha;

var colour = "rgb(58,150,270)";
ctx.fillStyle = colour;
ctx.fillRect(x, y, size, size);


console.log("ID: " + requestID);  
console.log("Alpha: " + alpha);

if(alpha == 1) {
    cancelAnimationFrame(requestID);
}   

};

function drawSquare(x,y) {
  requestAnimationFrame(function render(){
    renderSquare(x,y);          
  });   
}

但是我就是无法正常工作。这是完整的代码库。

http://codepen.io/easynowbaby/pen/GJKOej?editors=001

最终，我希望能够在loopSquares函数中使用该函数。任何帮助都非常感谢。干杯!

编辑：我应该让自己更清楚。我不想用图像重新创建画廊，我只对正方形的级联渐弱感兴趣。我想在画布上实现这种效果，在画布上我将使用fillRect函数在小方块中淡出。