javascript - 无法清除织物 Canvas

Question

我对 Fabric 和 JavaScript 都比较陌生。我编写了一个简单的书籍应用程序，当用户移至下一页时，我需要清除 Canvas 以便函数可以绘制下一页。对于某些页面，无论我做什么，我都无法清除 Canvas 。我尝试过使用 canvas.clear() 并通过后门并使用 context.clearRect，在函数内部和外部。以下代码基于 fabricjs.com 上的“Sliding Ladybirds”演示，请注意函数的最后一行应该清除 Canvas ，但实际上并没有，上面提到的其他选项也没有。谁能告诉我我错过了什么？

    window.onload = function () {
        function pics() {
            var canvas = this.__canvas = new fabric.Canvas('cvs', { selection: false });
            fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

            setInterval(function () {
                fabric.Image.fromURL('http://fabricjs.com/assets/ladybug.png', function (img) {
                    img.set('left', fabric.util.getRandomInt(200, 600)).set('top', -50);
                    img.movingLeft = !!Math.round(Math.random());
                    canvas.add(img);
                });
            }, 1000);

            (function animate() {
                canvas.forEachObject(function (obj) {
                    obj.left += (obj.movingLeft ? -1 : 1);
                    obj.top += 1;
                    if (obj.left > 900 || obj.top > 500) {
                        canvas.remove(obj);
                    }
                    else {
                        obj.setAngle(obj.getAngle() + 2);
                    }
                });
                canvas.renderAll();
                fabric.util.requestAnimFrame(animate);
            })();
            canvas.clear();
        };
        pics();
    };

Answer 1

如果您仔细查看代码，它有一个 setInterval() 方法，该方法将每秒连续调用(1000 毫秒)。您正在 setInterval() 之外使用 canvas.clear() 方法。因此，即使您清除了 Canvas ，图像也会在下次执行 setInterval() 时添加。您可以在清除 Canvas 时使用 clearInterval() 方法清除 setInterval()(推荐)或放置 canvas.clear()根据您的需要在 setInterval() 中。