Очистка контекста при рисовании на Famo.us CanvasSurface

Question

Я хочу реализовать кастом render() метод на Famo.us CanvasSurface экземпляр (или его подкласс). Мне удалось нарисовать в контексте поверхности, но не удалось очистить контекст между кадрами анимации.

Это мой код ( http://jsfiddle.net/Y9gUU/1/):

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Modifier = Famous.Core.Modifier;
    var RenderNode = Famous.Core.RenderNode;
    var CanvasSurface = Famous.Surfaces.CanvasSurface;
    var Transform = Famous.Core.Transform;

    var appContext = Engine.createContext();

    var canvas = new CanvasSurface({
        size: [500, 300],
        properties: {
            backgroundColor: 'red'
        }
    });

    var i = 0;

    // The line should move downwards, beginning at the top. Instead, clearRect() seems to have no effect at all.
    canvas.render = function render() {

        var ctx = this.getContext('2d');

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.moveTo(10, i);
        ctx.lineTo(60, i);
        ctx.stroke();

        i++;

        return this.id;
    };

    appContext.add(canvas);

    Engine.pipe(Application);
});

Спасибо за любую помощь, которую вы можете предложить!

Answer 1

В вашем случае clearRect() работает, но будет работать лучше, если вы выполняете fillRect() для рисования. Вот модифицированный код ( http://jsfiddle.net/uxE8k/1/)

canvas.render = function render() {

        var ctx = this.getContext('2d');

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.fillRect(10, i, 50, 1);
        //ctx.moveTo(10, i);
        //ctx.lineTo(60, i);
        //ctx.stroke();

        if (i++ > ctx.canvas.height) i = 0;

        return this.id;
    };

Answer 2

Добавление ctx.beginPath() Перед проведением линии решена проблема.

Это обновленный код ( http://jsfiddle.net/Y9gUU/6/):

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Modifier = Famous.Core.Modifier;
    var RenderNode = Famous.Core.RenderNode;
    var CanvasSurface = Famous.Surfaces.CanvasSurface;
    var Transform = Famous.Core.Transform;

    var appContext = Engine.createContext();

    var canvas = new CanvasSurface({
        size: [500, 300],
        properties: {
            backgroundColor: 'red'
        }
    });

    var i = 0;

    // The line should move downwards, beginning at the top. Instead, clearRect() seems to have no effect at all.
    canvas.render = function render() {

        var ctx = this.getContext('2d');

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.beginPath();
        ctx.moveTo(10, i);
        ctx.lineTo(60, i);
        ctx.stroke();

        i++;

        return this.id;
    };

    appContext.add(canvas);

    Engine.pipe(Application);
});