在 Famo.us CanvasSurface 上绘图时清除上下文答案

【问题标题】：Clearing a context when drawing on Famo.us CanvasSurface在 Famo.us CanvasSurface 上绘图时清除上下文
【发布时间】：2014-08-01 00:29:20
【问题描述】：

我想在 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);
});

感谢您提供的任何帮助！

【问题讨论】：

标签： javascript canvas famo.us

【解决方案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;
    };

【讨论】：

谢谢！您的版本也可以，但我通过在画线之前添加ctx.beginPath() 解决了我的问题（请参阅上面的答案）。

【解决方案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);
});

【讨论】：