在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的坐标按照我期望的方式工作？

Answer 1

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

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

Answer 2

我认为你做得更好,只是习惯它.原点位于左上方,大多数基于像素的视频/屏幕API.

这是关于这个主题的讨论.

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>