Javascript 在HTML5画布中设置不透明度动画

我正在尝试重新创建，但我希望这是在画布上，基本上画与fadein效果使用循环广场。循环部分还可以，但我无法确定的是淡入效果。我使用的是requestAnimationFrame，每次重新绘制时，globalAlpha都会增加，旧的sqaure会被删除，并绘制一个新的sqaure。这就是功能：

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);          
  });   
}

但我就是不能让它工作。这是一个完整的密码笔

最终，我希望能够使用loopSquares函数中的函数。非常感谢您的帮助。干杯

---

编辑：我应该说得更清楚些。我不想用图像重建画廊，我只对方形的层叠淡入效果感兴趣。我想在画布上实现这个效果，我将使用fillRect函数在小正方形中淡入淡出。

这不是画布，也不是画布效果

这些是通过大小和不透明度设置动画的简单图像标记。 只需将任何图像拖动到URL栏，您就会看到完整分辨率图像打开。这是因为它们是DOM元素。如果这是一个画布，你不可能把它们拖到URL栏

---

所有你需要做的是动画一个图像标签正确（大小和不透明度）。这两种方法都非常简单，并对jQuery进行了很好的解释。接下来，将该效果组合到一个数组中，在它们之间有一个延迟，您就可以开始了。

这既不是画布也不是画布效果

这些是通过大小和不透明度设置动画的简单图像标记。 只需将任何图像拖动到URL栏，您就会看到完整分辨率图像打开。这是因为它们是DOM元素。如果这是一个画布，你不可能把它们拖到URL栏

所有你需要做的是动画一个图像标签正确（大小和不透明度）。这两种方法都非常简单，并对jQuery进行了很好的解释。接下来，在一个数组中结合这种效果，在它们之间加上一个延迟，你就可以开始了。

这里首先要指出的是如何使用

requestID

设置alpha。来自（我的重点）：

一个长整型值，即请求id，用于唯一标识 回调列表中的项。这是一个非零值，但可能不是 对其价值进行任何其他假设。您可以将此值传递给 cancelAnimationFrame（）以取消刷新回调请求

换句话说，不要假设这将保持一个和单元格当前索引相等的运行值。它可能会在一个浏览器中意外地执行此操作，但在另一个浏览器中不会执行此操作。通过其他方式跟踪此值

其次，

globalAlpha

可以在整个上下文中处理它旁边绘制的任何内容。这意味着您需要跟踪当前每平方的alpha，或者使用允许您设置每平方alpha的颜色样式rgba。不过这并不重要，因为您需要在这里跟踪alpha

一个解决方案 我建议使用一个对象来实现这一点，一个方形的猴子可以被训练来正确设置它的alpha，然后在网格上复制

例子 主对象将跟踪所有设置，例如当前alpha、更新多少、什么颜色等等。当然不仅仅限于这些，你也可以添加比例、旋转等，但这里我只展示alpha：

// Square-monkey object
function Rectangle(ctx, x, y, w, h, color, speed) {

  this.ctx = ctx;
  this.x = x;
  this.y = y;
  this.height = h;
  this.width = w;
  this.color = color;

  this.alpha = 0;                        // current alpha for this instance
  this.speed = speed;                    // increment for alpha per frame
  this.triggered = false;                // is running
  this.done = false;                     // has finished
}

为了节省一些内存并提高性能，我们可以使用常见函数/方法的原型：

Rectangle.prototype = {

  trigger: function() {                  // start this rectangle
    this.triggered = true
  },

  update: function() {
    if (this.triggered && !this.done) {  // only if active
      this.alpha += this.speed;          // update alpha
      this.done = (this.alpha >= 1);     // update status
    }

    this.ctx.fillStyle = this.color;           // render this instance
    this.ctx.alpha = Math.min(1, this.alpha);  // clamp value
    this.ctx.fillRect(this.x, this.y, this.width, this.height);
  }  
};

我们现在需要做的是定义网格和单元大小：

var cols = 10,
    rows = 6,
    cellWidth = canvas.width / cols,
    cellHeight = canvas.height /rows;

现在，我们可以使用每个单元的对象填充网格：

var grid = [],
    len = cols * rows,
    y = 0, x;

for(; y < rows; y++) {
  for(x = 0; x < cols; x++) {
    grid.push(new Rectangle(ctx, x * cellWidth, y * cellHeight,
                            cellWidth, cellHeight, "#79f", 0.25));
  }
}

var-grid=[]，
len=cols*行，
y=0，x；
对于（；y<行；y++）{
对于（x=0；x

最后，我们需要以我们喜欢的任何方式触发这些正方形，这里只是一种对角线级联方式。我们还可以跟踪是否所有操作都已完成：

function loop() {
  ctx.globalAlpha = 1;           // reset alpha
  ctx.clearRect(0, 0, w, h);     // clear canvas

  // trigger cells
  for(y = 0; y < rows; y++) {    // iterate each row
    var gx = (x|0) - y;          // calc an x for current row
    if (gx >= 0 && gx < cols) {  // within limit?
      index = y * cols + gx;     // calc index
      grid[index].trigger();     // trigger this cell's animation if not running
    }
  }

  x += 0.25;                     // how fast to cascade

  hasActive = false;             // enable ending the animation when all done

  // update/render all cells
  for(var i = 0; i < grid.length; i++) {
    grid[i].update();
    if (!grid[i].done) hasActive = true;      // anyone active?
  }

  if (hasActive) requestAnimationFrame(loop); // animate if anyone's active
}

函数循环（）{
ctx.globalAlpha=1；//重置alpha
clearRect（0，0，w，h）；//清除画布
//触发细胞
对于（y=0；y=0&&gx

实例

var canvas=document.querySelector（“canvas”），
ctx=canvas.getContext（“2d”），
w=画布宽度，
h=画布高度；
//方形猴子物体
函数矩形（ctx、x、y、w、h、颜色、速度）{
this.ctx=ctx；
这个.x=x；
这个。y=y；
这个高度=h；
这个宽度=w；
这个颜色=颜色；
this.alpha=0；//此实例的当前alpha
this.speed=speed；//每帧alpha的增量
this.triggered=false；//正在运行
this.done=false；//已完成
}
//将共享的原型方法
矩形。原型={
触发器：函数（）{//启动此矩形
this.triggered=true
},
更新：函数（）{
如果（this.triggered&&！this.done）{//仅当处于活动状态时
this.alpha+=this.speed；//更新alpha
this.done=（this.alpha>=1）；//更新状态
}
this.ctx.fillStyle=this.color；//呈现此实例
this.ctx.globalAlpha=Math.min（1，this.alpha）；
this.ctx.fillRect（this.x，this.y，this.width，this.height）；
}  
};
//填充网格
var cols=10，
行=6，
cellWidth=canvas.width/cols，
赛尔