I am relatively new to Fabric and also JavaScript. I have written a simple book application, and when a user moves to the next page I need to clear the canvas so a function can draw the next page. For some pages no matter what I do I cannot get the canvas to clear. I have tried using canvas.clear() and going through the back door and using context.clearRect, both inside and outside the function. The following code is based on the "Sliding Ladybirds" demo on fabricjs.com, notice the last line of the function should clear the canvas, but it doesn't, neither do the other options mentioned above. Can anyone tell me what I am missing?
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://ift.tt/1N01OyG', 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();
};
Aucun commentaire:
Enregistrer un commentaire