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。

Here's a discussion on the subject

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>

Answer 4

这取决于你把.scale放在哪里我刚尝试了这个，它起初没有用。您需要将.scale放在moveTo（）;

之间

hotspots.save($scope.hotspot).$promise.then(function (response) { console.log(response.id); });

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

4 个答案: