Question

以下是我现在的代码：

＆＃13;

<!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>

＆＃13;

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

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

我确实尝试在移动时裁剪图像，但我无法完成这项工作。我有什么想法可以做到这一点？提前谢谢！

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

<canvas id="canvas1" width="1650" height="825" style="width: 650px; height: 330px;"></canvas>

（根据需要调整区域）。

JS Canvas，如何使图像慢慢消失？

1 个答案: