将画布原点设置为左下角

Question

有没有一种方法可以将画布的原点设置为左下角？我尝试过进行缩放，但缩放后所有内容都倒置了。我需要创建类似于坐标系但只包括正部分（第一象限）的东西。因此，我需要从左下角开始以0.0为起点。

- spiroski

Answer 1

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

在 JSFiddle 上查看演示。

- icktoofay

---

但是这段文字是倒过来的 :( - spiroski

@user986871：在每次绘制文本之前和之后，都要执行ctx.scale(1, -1)。 - icktoofay

@icktoofay，我尝试了你在评论中提出的建议，但它没有起作用，文本只是消失了，好像被推出了屏幕。 - Mister SirCode

@MisterSirCode 在此之前，您还需要执行ctx.translate(0, 0);，并在之后执行ctx.translate(0, canvas.height);。 - Aidan

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]);

示例

无论如何，我强烈建议您尽可能适应屏幕坐标。如果您不必总是考虑这一点，将来可以避免许多头痛的问题。

- Simon Sarris

Answer 3

其中最简单和正确的方法之一是使用ctx.transform()方法文档在这里

- Asyl