Переместить прямоугольник с помощью Canvas в Javascript?

Question

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

Как мне щелкнуть DIV и заставить его двигаться в правильном направлении?

но с прямоугольником, нарисованным на холсте HTML5. Как мне этого добиться?

Answer 1

С холстом вы захотите использовать ту же технику, что и в этом посте, за исключением использования нескольких кадров и стирания / рисования прямоугольника в каждом кадре. Псевдокод:

setTimeout(1000/30, function () {
  canvas.erase()
  rect.update_position()
  canvas.drawRect(rect)
})

В качестве альтернативы, вы можете использовать физический движок, такой как Box2dWeb, чтобы делать разные вещи, такие как «стряхивание» - http://code.google.com/p/box2dweb/