javascript - 为什么闪烁的矩形（被画布淹没）不起作用？

Question

我刚开始学习一点关于画布的知识！

我想在设定的时间间隔后绘制闪烁的矩形（显示/隐藏/显示/隐藏/显示...）。

如果我删除setInterval()并且clear_canvas()- 矩形被淹没。问题似乎出在clear_canvas(). 我从这里得到了那个代码。

目前它只是显示空白页。在我看来，它应该画，清楚，画，清楚...

我添加console.log()用于调试；它被称为！Chrome 14（在 Fedora 15 上，如果重要的话）中没有错误或抛出任何错误。一切似乎都还好；不幸的是，它不是！

我把代码放在JsFiddle上，所以你们可以帮助我。谢谢！

Answer 1

您的问题是它在绘制矩形时正在清除它。

您需要使该功能在绘图和清除之间交替以注意到任何内容。

var draw = false;
$(function() {

    setInterval(function() {

        console.log('called');
        if(draw)
                draw_rectange();
        else
                clear_canvas();

        draw = !draw;

    }, 1000);

});

Answer 2

讨厌这样做，但这是一个简单的操作顺序问题。在绘制之前清除画布，而不是之后。

转变

draw_rectange();
clear_canvas();

到

clear_canvas();
draw_rectange();

结果：http: //jsfiddle.net/pYve5/4/