Анимация рисования линий на холсте с использованием кадра анимации запроса

Я изо всех сил пытаюсь создать анимацию рисования линий, используя кадр анимации запроса. Пока я использовал функцию setInterval, все работало нормально, но я где-то читал, что кадр запроса ани намного оптимизирован и что все функции в интервале должны быть написаны таким образом.

Итак, вот мой код:

вар топМинХ = 3; вар топМаксХ = 75; var topMinY = 2;
var topMaxY = 2; вар мин; вар макс;

//request animation frame
   (function animate(){
        var t = setTimeout(function(){
            requestAnimFrame(animate);
            var d = render(topMinX,topMaxX,topMinY,topMaxY,true);
        },20);

    })();

     function render(xMin,xMax,yMin,yMax,direction){
        if(direction){
            min = xMin;
            max = xMax
         }else{
            min = yMin;
            max = yMax;
         }      

        if(min<max){
             context.beginPath();
             if(direction){
                context.moveTo(xMin,yMin);
                xMin = xMin+2;
                alert(xMin);
                context.lineTo(xMin,yMax);
             }else{
                context.moveTo(xMin,yMin);
                yMin = yMin+2;
                context.lineTo(xMax,yMin);
             }                   
             context.lineWidth = 4;
             context.stroke();              
        }

     }

Проблема в том, что значение xMin не увеличивается. Он всегда будет предупреждать 5, и я ожидал, что он будет увеличиваться на 2 на каждой итерации. По сути, я просто хочу нарисовать квадрат, поэтому мне не нужны никакие диагональные движения, поэтому я добавил параметр направления.

Я новичок в холсте и прошу ани-рамку, поэтому любая помощь будет более чем полезна.


javascript canvas requestanimationframe
person hjuster    schedule 05.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаю о квадратном рисовании, но проблема здесь, кажется, в передаче переменной в функцию.

Те переменные, которые вы определили в начале, не изменяются при дальнейшей передаче в функции.

Вы можете проверить, как это работает здесь:

function swap(a, b) {
   var tmp = a;
   a = b;
   b = tmp; //assign tmp to b
}

var x = 1, y = 2;
swap(x, y);

alert("x is " + x + " y is " + y); // "x is 1 y is 2"

И ваш пример на FIDDLE

он рисует линию, а topMinX увеличивается

person marbor3    schedule 05.02.2013
comment
Ну.... да... Я знаю, что это проблема, но я не знаю, как ее решить :( . Мне нужно передать X и Y в качестве аргументов, или у меня будет хуууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу ниуууу какая рекурсия хоть какая-то. - person hjuster; 05.02.2013
comment
По сути, в конце я хочу вызвать функцию рендеринга, чей обратный вызов снова вызовет функцию рендеринга, но с другими параметрами, поэтому она нарисует новую строку и так далее... - person hjuster; 05.02.2013
comment
@hjuster: проверьте обновленный Fiddle. Это больше то, чего вы хотели достичь? - person marbor3; 05.02.2013
comment
Это нуждается в некоторой полировке, но более или менее, вот и все! Спасибо брат! - person hjuster; 05.02.2013