HTML5 Canvas getImageData和Translation

Question

我使用HTML5 Canvas制作可驾驶的汽车。经过一番研究，我可以让汽车前进，后退并使用平移和旋转旋转，如下所示：

ctx.translate(car.x, car.y)
ctx.rotate(Math.PI / 180 * car.angle)
let newX = -(car.width / 2)
let newY = -(car.height / 2)
ctx.drawImage(car.img, newX, newY, car.width, car.height)

好的，这完美无缺。我还需要在汽车前面画三条线（就像一个障碍物传感器），我可以很容易地应用它，因为它已经翻译和旋转了，结果就是：

现在问题是，让我们走中间路线，例如，我想走路＆＃34;走路＆＃34;从这条线的[x1，y1]到[x2，y2]，检查每个像素的颜色，看看是否有黑色像素（障碍物），如果是，那么距离汽车的距离是多少（我之前做过这个）画线，所以绿色像素不会打扰我。

我发现我可以使用getImageData执行此操作，但它不会受到翻译的影响，因此我完全不知道如何轻松地通过该行。

我尝试解决方案只是从X1增加到X2，因为Y是静态的（记住，它是平移和旋转的，所以只有X前进[适用于线条图]），但是，正如我现在所说，getImageData不受translate的影响。