В Canvas HTML5 могу ли я увеличить ось 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);

И я знаю, что я могу инвертировать ось y с помощью scale().

context.scale(1, -1);

Это похоже на работу, за исключением того, что он вызывает перевернутый текст. Есть ли способ сделать Canvas координаты работать так, как я ожидаю?

Ответ 1

Для более современной настройки вы можете использовать context.transform(1, 0, 0, -1, 0, canvas.height). Это переворачивает ось y и перемещает весь холст на один экран.

Подробнее о доступных преобразованиях: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Ответ 2

Я думаю, вы бы сделали намного лучше, чтобы просто привыкнуть к этому. Происхождение находится в левом верхнем углу с большинством API-интерфейсов видео/экрана на основе пикселей.

Здесь обсуждается предмет.

Ответ 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>

Ответ 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();