当堆叠在彼此之上时，Javascript画布图像会变得块状

Question

所以我随机生成两种类型的云，并且这些云的目的是叠加在一起并缓慢移动（就像云irl一样）。 所以基本上我正在绘制一个云图像，清除区域，移动图像（通过在不同的位置重新创建它），并创建另一个云并重复该过程，但当云层堆叠在彼此之上时，我'在堆积的云之间得到一个正方形区域。不知道如何解决它。

检查一下:(看看云是如何叠加在一起的块状外观）

http://testcloudsmc.bitballoon.com

这是完整的代码：

https://repl.it/FTo8/3

这是代码中最相关的部分：

------------------------------------------------
var canvas; var ctx; var frameRate; var assets = [];
window.onload = function(){
canvas    = document.getElementById('mycanvas');
ctx                 = canvas.getContext('2d');
frameRate           = 1000/30; //30 fps

//Decides on a x position for clouds:
for(var f = 0;f<Math.floor(Math.random()*40)+10;f++){
    cloudsarrayxpos[f] = Math.floor(Math.random()*800)+10;

}
/* Move/Render images */
for (var a = 0; a < 21; a++){
        assets[a] = document.getElementById(a);
        console.log(assets[a]);
};

/* CREATE OBJECTS FUNCTIONS: */
var clouds = function(x,y,h,w){
    ctx.clearRect(x,y,w,h);
    if((x>300)||(x<100)){
     ctx.drawImage(assets[7],x,y,w,h);
    }else{
     ctx.drawImage(assets[20],x,y,w,h);
    }
} //end of clouds function

function animate(){
    for(var g = 0; g<cloudsarrayxpos.length;g++){
        clouds(cloudsarrayxpos[g],(5*g),300,200);
        cloudsarrayxpos[g]+=(Math.random()*.1)+.05; //changing the x position of each cloud in the array making it appear to be moving
    }
    window.requestAnimationFrame(animate);
}

}//end of window.onload

Answer 1

问题是您在绘制之前清除每个云点中的画布。 这意味着云图像的透明度（alpha）值不起作用，因为每个结果像素仅由最后一个图像组成。

要解决此问题，请仅在每个动画周期清除画布一次。

具体做法是：

1. 从ctx.clearRect功能
中删除clouds
2. 在animate功能的顶部添加此项：
   ctx.clearRect(0, 0, 1300, 600);