使用StackBlur为淡化动画应用模糊效果不佳

Question

我有一个画布可以进行过渡，许多图像都应用了淡入淡出的alpha。问题在于，对于每个帧都应用模糊，这会使动画变慢。

如果在应用转换之前，请执行canva的复制并应用模糊，并在使用此画布在其他画布中进行绘制后，动画将不起作用。

代码是下一个：

        function animateFade()
            if (fadePct > 100) {
                return;
            }
            requestAnimationFrame(animateFade);

            draw(imgs[fadeInIndex], fadePct / 100);

            draw(imgs[fadeOutIndex], (1 - fadePct / 100));

            fadePct++;
        }
        function draw(image, opacity) {
            ctx.save();
            ctx.globalAlpha = opacity;

            ctx.drawImage(image, 0, 0);
             StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 50);
            ctx.restore();
        }

         imageURLs = []; // put the paths to your images here
        imagesOK = 0;
        imgs = [];
        var items = $('.carrousel .post');
        for (var i = 0; i < items.length; i++) {
            image = items.eq(i).find("img").attr('src');
            imageURLs.push(image);
        }
        for (var i = 0; i < imageURLs.length; i++) {
            img = new Image();
            imgs.push(img);
            img.onload = function () {
                imagesOK++;
                if (imagesOK >= imageURLs.length) {

                    ctx.drawImage(imgs[0], 0, 0);

                    var ratio = 1;
                    ratio =  $('#best_game').width() / img.width;

                    canvas.width = img.width * ratio;
                    canvas.height = img.height * ratio;
                    ctx.drawImage(imgs[0], 0, 0, canvas.width, canvas.height);

                    StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 50);

                }
            };
            img.onerror = function () {
                alert("image load failed");
            }
            img.crossOrigin = "anonymous";
            img.src = imageURLs[i];
        }


        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
         });