Почему мерцающий прямоугольник (затопленный холстом) не работает?

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/