将画布原点设置为左下角

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() 方法文档在这里