Я использую 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)
Хорошо, это работает отлично.Мне также нужно нарисовать 3 линии в передней части автомобиля (например, датчик препятствий), которые я мог бы легко применить, потому что они уже были переведены и повернуты, и результат такой:
Теперь проблема в том, что давайте возьмем среднюю линию, например, я хочу «пройти» от [x1, y1] до [x2, y2] этой строки, проверяя цвет каждойпиксель, чтобы увидеть, есть ли черный пиксель (препятствие), и если да, каково расстояние от автомобиля (я делаю это до рисования линии, поэтому зеленый пиксель меня не беспокоит).
Я обнаружил, что могу использовать getImageData для этого, за исключением того, что на него не влияет перевод, поэтому я совершенно заблудился, как легко пройти по линии.
Моя попытка найти решение состояла в том, чтобыпросто увеличивайте с X1 до X2, потому что Y является статическим (помните, он переведен и повернут, поэтому только X идет вперед [это работало для рисования линий]), но, как я уже сказал, getImageData не влияет на translate.