Question

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

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

在Famo.us CanvasSurface上绘制时清除上下文

2 个答案: