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

20 浏览
0 Comments

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

我正在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的坐标符合我的预期吗？

0