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

Question

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) 

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

context.translate(0, canvas.height);

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?

Answer 1

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

More on available transformations: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Answer 2

I think you'd do much better to just get used to it. The origin is in the top left with most pixel-based video/screen APIs.

Here's a discussion on the subject .

Answer 3

Plot graph_height - y .

eg: 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>

Answer 4

It depends on where you put the .scale I just tried this and it didn't work at first. You need to put the .scale between the moveTo();

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