JS Canvas, How to make an image slowly dissapear?
Question
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 answers
solution1
1 ACCPTED
Simply add an extra clearRect() for the region you want to hide when the criteria (image index) is fulfilled.
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.