在HTML5 Canvas中，我可以让y轴向上而不是向下吗？ [英] In HTML5 Canvas, can I make the y axis go up rather than down?

问题描述

我在Canvas中绘制一个图形，并且与y轴是向后的事实斗争。原点在左上角，增加的值向下而不是向上。

I'm drawing a graph in Canvas and struggling with the fact that the y-axis is "backward." The origin is in the top-left corner, and increasing values go down rather than up.

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

知道我可以使用translate（）将原点移动到左下角。

I know that I can move the origin to the bottom-left corner using translate().

context.translate(0, canvas.height);

我知道我可以使用scale（）反转y轴。

And I know that I can invert the y-axis using scale().

context.scale(1, -1);

这似乎工作，除了它导致文本上下颠倒。

That seems to work, except that it causes text to appear upside-down. Is there a way to make Canvas's coordinates work the way I expect?

推荐答案

对于更现代的设置，你可以使用 canvas.transform（1，0，0，-1，0，canvas.height）。

For more modern setup, you can use canvas.transform(1, 0, 0, -1, 0, canvas.height). This flips y axis and moves the whole canvas one screenful.

更多可用的转换：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

这篇关于在HTML5 Canvas中，我可以让y轴向上而不是向下吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！