Esta pregunta se ha hecho dos veces sin la advertencia de "Desvanecimiento total"
Ambas respuestas aceptadas solo desvanecen parcialmente los contenidos. Ambos sugieren algo como:
// semi functional code, but doesn't fully work ctx.save(); ctx.globalAlpha = 1; ctx.globalCompositeOperation = "destination-in"; ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); ctx.restore();Esto deja residuos en todas partes, nunca se desvanece por completo. Vea el ejemplo a continuación:
let canvas = document.getElementsByTagName('canvas')[0]; let ctx = canvas.getContext('2d'); let rand = n => Math.floor(Math.random() * n); setInterval(() => { ctx.beginPath(); ctx.arc(rand(300), rand(120), rand(60), Math.PI * 2, 0); ctx.fillStyle = `rgba(${rand(256)}, ${rand(256)}, ${rand(256)}, 1)`; ctx.globalCompositeOperation = 'source-over'; ctx.fill(); }, 1000); let fadeOut = () => { let fadeAmount = 0.05; // Note that the colour here doesn't matter! Only the alpha matters. // The colour here is red, but you'll see no red appear ctx.fillStyle = `rgba(255, 0, 0, ${1 - fadeAmount})`; ctx.globalCompositeOperation = 'destination-in'; ctx.fillRect(0, 0, 300, 120); requestAnimationFrame(fadeOut); }; requestAnimationFrame(fadeOut); canvas { border: 3px solid #808080; background-color: #000000; } <canvas width="300" height="120"></canvas>La pregunta es: ¿Cómo se pueden desvanecer por completo los elementos en un lienzo, hasta volverlos transparentes?
EDITAR: estoy buscando una solución eficaz que funcione para situaciones con muchas capas (piense en el visualizador).
Aquí hay una pequeña muestra usando globalAlpha , me parece bien, sin residuos...
cada FadingCircle tendrá su propio desvanecimiento, que determinará qué tan rápido se desvanece y si llega a 0 o menos, no lo dibujamos, parece una solución fácil.
Puede agregar colores, posiciones aleatorias y cambiarlo tanto como desee para satisfacer sus necesidades.
const canvas = document.getElementsByTagName('canvas')[0]; const ctx = canvas.getContext('2d'); class FadingCircle { constructor(x, y, radius, fade) { this.x = x this.y = y this.radius = radius this.fade = fade this.globalAlpha = 1 } draw(ctx) { if (this.globalAlpha > 0) { ctx.beginPath() ctx.globalAlpha = this.globalAlpha ctx.arc(this.x, this.y, this.radius, Math.PI * 2, 0) ctx.fill() this.globalAlpha -= this.fade } } } let sml = new FadingCircle(40, 50, 20, 0.01) let med = new FadingCircle(140, 50, 30, 0) let big = new FadingCircle(100, 50, 50, 0.005) let animation = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); big.draw(ctx) med.draw(ctx) sml.draw(ctx) requestAnimationFrame(animation); }; requestAnimationFrame(animation); <canvas width="300" height="120"></canvas>