javascript - 在 Famo.us CanvasSurface 上绘图时清除上下文

Question

我想在 Famo.us CanvasSurface 实例(或其子类)上实现自定义 render() 方法。我成功地在表面的上下文中进行绘制，但无法在动画帧之间清除上下文。

这是我的代码(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;
    };