在 Javascript 中用 Canvas 轻弹一个矩形？

Question

I want to be able to hold mousedown on a rectangle, move in a direction, let go, and upon release have the rectangle be "flicked" towards the appropriate direction. I want to accomplish something like this:

How do I flick a DIV and have it move in the right direction?

but with a rectangle drawn in the HTML5 Canvas. How do I achieve this?

Answer 1

With the canvas, you'll want to use the same technique as in that post, except using multiple frames and erasing/drawing the rectangle each frame. Pseudocode:

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

Alternately, you can use a physics engine like Box2dWeb to do all kinds of stuff like 'flicking' - http://code.google.com/p/box2dweb/