JS画布，如何使图像慢慢消失？

Question

这是我现在拥有的代码：

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

我想发生的是，循环中的最后两个图像开始逐渐消失（不淡出）。 这是我所想到的一些简单图像。

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

我确实尝试在移动图像时对其进行裁切，但无法完成该工作。 有什么想法可以做到吗？ 先感谢您！

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画布，如何使图像慢慢消失？

问题描述

1 个解决方案

解决方案1
1 已采纳

JS画布，如何使图像慢慢消失？

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳