JS画布，如何使图像慢慢消失？
[英]JS Canvas, How to make an image slowly dissapear?
问题描述
Here is the code I have for now: 
这是我现在拥有的代码：
<!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>
What I want to happen is that the last two images in the cycle start to slowly dissapear( NOT fade out). 我想发生的是，循环中的最后两个图像开始逐渐消失（ 不淡出）。 Here are a few simple images of what I had in mind. 这是我所想到的一些简单图像 。
I want the two images to move towards eachother like they normally move in the code, but the moment a part of an image crosses the invisible line, that part gets deleted until the whole image dissapears, and then the cycle starts over. 我希望两个图像像通常在代码中一样朝彼此移动，但是当图像的一部分越过不可见线时，该部分将被删除，直到整个图像消失，然后循环开始。
I did try to crop the image while it is moving, but I wasn't able to make that work. 我确实尝试在移动图像时对其进行裁切，但无法完成该工作。 Any ideas how I can make this? 有什么想法可以做到吗？ Thank you in advance! 先感谢您！
1 个解决方案
解决方案1
1 已采纳
Simply add an extra clearRect() for the region you want to hide when the criteria (image index) is fulfilled. 满足条件（图像索引）时，只需为要隐藏的区域添加一个额外的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>
(adjust region as needed). （根据需要调整区域）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.