JS Canvas，如何让图像慢慢消失？答案

【问题标题】：JS Canvas, How to make an image slowly dissapear?JS Canvas，如何让图像慢慢消失？
【发布时间】：2016-11-30 22:37:19
【问题描述】：

这是我现在拥有的代码：

<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 2px solid; }
</style>

</head>
<body>
<canvas id="canvas1" width="1650" height="825" style="width: 650px; height: 330px;"></canvas>
<script>
var canvas,ctx,x,y,w,e;

    var slikeURL = [
	"https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png",
    "http://www.jasonjsmith.com/img/small-business-seo.jpg",
    "https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"
	]

var slike = slikeURL.map(url=>{var img = new Image(); img.src = url; return img});
function start_canvas()
{
var brojac = 0;
function draw() 
{
  ctx.drawImage(slike[brojac], x, y);
};

function draw1(w, e) 
{
  ctx.drawImage(slike[brojac], w, e);
};

function update(time)
{
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(w >= x)
	{
        e += 8;
        y += 8;
    }
	else
	{	
        x -= 4;
        w += 4;
    };
    if(slike){
        ctx.drawImage(slike[brojac], x, y);
        ctx.drawImage(slike[brojac], w, e);
			  }
    if (e > canvas.height) 
	{
	    brojac = (brojac + 1) % slike.length;
        x = canvas.width-190;
        y = 15;
        w = 1;
        e = 15;
    }
    requestAnimationFrame(update)
};
canvas = document.getElementById('canvas1');

    x = canvas.width-190;
    y = 15;
    w = 1;
    e = 15;

    ctx = canvas.getContext('2d');
    requestAnimationFrame(update)
}
window.addEventListener("load",start_canvas);
document.write(brojac);
</script>
</body>
</html>

我想要发生的是循环中的最后两个图像开始慢慢消失（不淡出）。这是我想到的few simple images。

我希望这两个图像像它们通常在代码中移动一样相互移动，但是当图像的一部分越过不可见线时，该部分被删除，直到整个图像消失，然后循环重新开始。

我确实尝试在图像移动时对其进行裁剪，但我无法做到这一点。任何想法我怎么能做到这一点？提前谢谢！

【问题讨论】：

标签： javascript image animation canvas

【解决方案1】：

当满足条件（图像索引）时，只需为要隐藏的区域添加一个额外的clearRect()。

var canvas,ctx,x,y,w,e;

    var slikeURL = [
	"https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png",
    "http://www.jasonjsmith.com/img/small-business-seo.jpg",
    "https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"
	]

var slike = slikeURL.map(url=>{var img = new Image(); img.src = url; return img});
function start_canvas()
{
var brojac = 0;
function draw() 
{
  ctx.drawImage(slike[brojac], x, y);
};

function draw1(w, e) 
{
  ctx.drawImage(slike[brojac], w, e);
};

function update(time)
{
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(w >= x)
	{
        e += 8;
        y += 8;
    }
	else
	{	
        x -= 4;
        w += 4;
    };
    if(slike){
        ctx.drawImage(slike[brojac], x, y);
        ctx.drawImage(slike[brojac], w, e);
      if (brojac > 0) ctx.clearRect(412,0,824,ctx.canvas.height);
			  }
    if (e > canvas.height) 
	{
	    brojac = (brojac + 1) % slike.length;
        x = canvas.width-190;
        y = 15;
        w = 1;
        e = 15;
    }
    requestAnimationFrame(update)
};
canvas = document.getElementById('canvas1');

    x = canvas.width-190;
    y = 15;
    w = 1;
    e = 15;

    ctx = canvas.getContext('2d');
    requestAnimationFrame(update)
}
window.addEventListener("load",start_canvas);
document.write(brojac);

canvas{border:#666 2px solid; }

&lt;canvas id="canvas1" width="1650" height="825" style="width: 650px; height: 330px;"&gt;&lt;/canvas&gt;

（根据需要调整区域）。

【讨论】：