Установить начало холста в нижний левый угол

Question

Эй, ребята, есть ли способ установить начало координат в левом нижнем углу холста?Я попытался масштабировать до -1, но после этого все перевернулось.Мне нужно сделать что-то вроде системы координат, но только с положительной частью (первый квадрант).Так что мне нужно, чтобы начать с 0,0 в левом нижнем углу.

Answer 1

ctx.translate(0, canvas.height);
ctx.scale(1, -1);

См. Демонстрацию по JSFiddle.

Answer 2

Есть ли способ установить начало координат в левом нижнем углу холста?

Не совсем так, как вы хотели бы, нет. Лучшее, что вы можете сделать, - это то, что сказал icktoofay.

При этом не сложно создать функцию для преобразования между одной системой и другой. Например:

// Given an X,Y in 1st quadrant cartesian coordinates give the corresponding screen coordinate
function cartToScreen(px, py) {
  return [px, -py + HEIGHT];
};

Итак, вы бы написали:

var coords = cartToScreen(50,50);
// draws 50 pixels from the bottoom instead of 50 pixels from the top
ctx.fillText("lalala", coords[0], coords[1]);

Пример

В любом случае, я настоятельно рекомендую, если вы вообще сможете просто привыкнуть к экранным координатам. Это избавит вас от множества головных болей в будущем, если вам не всегда придется учитывать эту небольшую разницу.

Answer 3

Один из самых простых и правильных способов - использовать метод ctx.transform () документация здесь