Холст - сделать так, чтобы круг на холсте двигался вниз в определенное время - PullRequest
Новая
       20

Холст - сделать так, чтобы круг на холсте двигался вниз в определенное время

1 голос
/ 26 декабря 2011

Я хотел бы создать круг ctx.arc(10, 10, 15, 0, Math.PI*2, true); и, следовательно, заставить его течь вниз, не теряя своих следов. Это хорошо видно на изображении ниже -

enter image description here

Здесь, как мы видим на темной стороне ... круг фактически движется с течением времени ... Я хочу контролировать скорость, вводя время ... как сверху вниз, оно должно достигаться через 2 секунды (или некоторыедругой способ управления скоростью потока)

РЕДАКТИРОВАТЬ: Извините за некоторых приятелей, вопрос в том, какой самый эффективный и "не требующий памяти" способ сделать это, (я знаю, что есть этот метод циклано сам метод запоминания памяти)

Ответы [ 2 ]

1 голос
/ 26 декабря 2011

Javascript знает setTimeout(fn, ms), который будет вызывать данную функцию через указанное количество миллисекунд. Однако браузеру потребуется некоторое время для рендеринга ваших рисунков, и когда вы хотите, чтобы 2 секунды были активными, вам придется следить за частотой кадров / секунд.

Theres также новый проект спецификации , названный requestAnimationFrame, см. http://paulirish.com/2011/requestanimationframe-for-smart-animating/ для этого.

1 голос
/ 26 декабря 2011

Вы можете нарисовать верхний полукруг, прямоугольник и нижний полукруг.Вы можете рассчитать, сколько нужно сдвинуть вниз в определенный момент времени, с помощью: 

(Date.now() - startTime) / t * (y2 - y1)

, где t - время, необходимое для полного движения.

http://jsfiddle.net/eGjak/231/.

var ctx = $('#cv').get(0).getContext('2d');

var y1 = 100,  // start y
    y2 = 300,  // end y
    x  = 200,  // x
    r  = 50,   // radius
    t  = 2000; // time

var dy = y2 - y1, // difference in y
    pi = Math.PI,
    startTime = Date.now();

var f = function() {
    var y = y1 + (Date.now() - startTime) / t * dy;

    ctx.beginPath();
    ctx.arc(x, y1, r, pi, 0); // top semicircle
    ctx.rect(x - r, y1, r * 2, y - y1); // rectangle
    ctx.arc(x, y, r, 0, -pi); // bottom semicircle
    ctx.fill();

    if(y < y2) { // if should be moved further
        webkitRequestAnimationFrame(f);
    }
};

f();
...