翻译图形不会移动到顶部和左侧的0位置

Question

我正在玩canvas，发现了一个在使用translate方法时我不明白的问题。

在这个小提琴http://jsfiddle.net/claireC/ZJdus/4/中，我希望绘图移动并从四个墙壁中的每个墙壁反弹，但绘图不会移动到左墙或顶墙。这是我用来移动绘图的代码。这适用于我已完成的其他绘图，但对变换方法不同。

if(dx < 0 || dx > 150) vx = -vx;
if(dy < 0 || dy > 240 ) vy = -vy;

为什么此代码不起作用的翻译方法是什么？

Answer 1

相对于平移而言，绘图本身从不会绘制距离边缘183个像素的任何物体。

你也需要补偿这个位置，例如：

if(dx < -183 || dx > 150) vx = -vx;
if(dy < -87 || dy > 240 ) vy = -vy;

Origin是您翻译的内容，绘图被绘制183,87 relative 到原点。

<强> Modified fiddle here

或者更改绘图位置，以便绘图从原点[0,0]开始。