无法清除织物帆布答案

【问题标题】：Can not clear the fabric canvas无法清除织物帆布
【发布时间】：2015-09-30 12:56:21
【问题描述】：

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

    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();
    };

【问题讨论】：

要查看“lady bugs”演示点击这里fabricjs.com/ladybug 一旦开始这些无法清除？！？

标签： javascript canvas fabricjs

【解决方案1】：

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

【讨论】：