在HTML5 Canvas中，我可以让y轴向上而不是向下吗？

Question

我正在Canvas上绘制一个图表，但是遇到了y轴是"反向"的问题。原点在左上角，增加的值向下而不是向上。

(0,0)            (x,0)       (0,y) ^
      +-------------->             |
      |                            |
      |    CANVAS                  |     INSTEAD
      |    DOES THIS               |     OF THIS
      |                            |
      |                            +----------------->
(0,y) v                       (0,0)              (x,0) 

我知道使用translate()函数可以将原点移动到左下角。

context.translate(0, canvas.height);

我知道可以使用scale()函数来反转y轴。

context.scale(1, -1);

这似乎可以工作，但会导致文本上下颠倒。有没有办法让Canvas的坐标按照我期望的方式工作？

- Patrick McElhaney

---

我给10年前的自己的建议是使用构建器模式。不要直接在画布上绘制，而是创建一个你想要绘制的东西的模型，并编写代码将模型转换为画布。这样，如果以后想切换到另一种媒介（如SVG），就不必重写任何代码。你所需要做的就是创建一个新的翻译器。 - Patrick McElhaney

最简单的方法可能是使用转换，然后进行文本绘制修复。这样你只需要重写一个函数，而不是所有的函数。我猜我们也需要重写任何绘制图像的部分。 - Sam Watkins

Answer 1

对于更现代的设置，您可以使用context.transform(1, 0, 0, -1, 0, canvas.height)。这将翻转y轴并将整个画布移动一个屏幕。

更多可用的变换信息，请参见： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

- user5520124

---

只是一个小提示 - 如果您正在处理任何鼠标逻辑，您还需要反转鼠标事件的指针位置。 - Tom 'Blue' Piddock

汤姆，你如何反转鼠标事件的指针位置？ - John Mott

很不幸，这种方法现在似乎也会翻转文本。 - otoomey

Answer 2

我认为你最好还是习惯这种情况。大多数基于像素的视频/屏幕API的起点都在左上角。

这里是有关该主题的讨论。

- Skilldrick

---

在边界框中bottom > top的情况下，这很令人困惑。 - psycho brm

当你花几分钟思考它时，这并不是真的很令人困惑。实际上，它比被接受的智慧认为的右>左（在许多人类语言中并不正确）要少得多。范例是顶部左侧角已知，并且所有值都从那里出去。这是合乎逻辑的，因为当某些东西在任意大小的屏幕或文档内呈现时，这是我们唯一可以依赖的东西。 - joshstrike

我认为“文档”是关键词。屏幕可以根据其用于显示文本还是笛卡尔图而有不同的方向；但通常我们将原点放在“上部”是因为在几乎所有人类语言中，文档是从上到下阅读的，而不是从下到上（从下到上的很少见）。HTML5画布遵循这种约定，因为HTML基于文档概念（因此DOM）。这与像素基础无关。 - LarsH

Answer 3

绘制图形 graph_height - y。

例如：http://jsfiddle.net/nVUUM/

<canvas></canvas>

<script>
var e = document.getElementsByTagName('canvas')[0];
var c = e.getContext('2d');

function plot(x,y) {
  c.fillRect(x, e.height-y, 5, 5);  
}

plot(100,50);
plot(200,100);
</script>

- Rich

---

唉，我采用了这种方法，但是过了一段时间后，每次涉及y坐标的调用都要这样做，非常乏味、容易出错，而且没有必要。我更愿意使用https://dev59.com/XG855IYBdhLWcg3wcz_y#33499668。 - LarsH

Answer 4

这取决于你在哪里放置.scale。我刚尝试了一下，起初它并没有起作用。你需要将.scale放在moveTo();之间。

ctx.arc(50,50,50,0,2*Math.PI); ctx.moveTo(50,50); ctx.scale(1,-1); ctx.lineTo(50,100); ctx.stroke();

- brocksprogramming