В HTML5 Canvas можно ли заставить ось y идти вверх, а не вниз?

Я рисую график на холсте и борюсь с тем фактом, что ось 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);

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

4 21
javascript html5 canvas

4 ответа:

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

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

13

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

Вот дискуссия на эту тему .

11

Сюжет 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>
5

Это зависит от того, где вы ставите .я только что попробовал это сделать, но сначала ничего не вышло. Вам нужно поставить свою .масштаб между moveTo ();

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

0