Question

似乎我们在小学里学到的一切都被HTML5 Canvas抛到了窗外。我在概念上经常遇到问题，因为我认为就Y轴而言，当你走下去时，它会变得更加消极。是否可以使用context.translate()执行此操作，如果是，如何执行此操作？我无法在Stack Overflow上找到这样的另一个问题。目前，这里有一些入门代码：

<html>
<head>
<script>
window.onload = function get_Context() {
canvas=document.getElementById('myCanvas');
context = canvas.getContext('2d');
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
</body>
</html>

我完全不知道如何解决这个问题。任何事情都会有所帮助，但如果你愿意，除了代码我还想知道为什么特定的线路工作。提前致谢。编辑：当我说任何事都有帮助时，我不想要任何JQuery。

Answer 1

现在，您处理的几乎任何图形语言都会运行，y == 0是屏幕的顶部，值随着您的下降而增加。 Flash的工作方式相同。原因是所有屏幕值都是负数并且所有正值都在视口之上是荒谬的。这就是图形语言的工作方式。实际上很少有这种情况可以通过翻转符号来解决。你当然不需要翻译画布来达到你想要的任何效果;你只需要反转你在你的代码中沿着y轴做的任何事情，你会感觉好多了。

Answer 2

尝试

context.scale(1, -1);

它会翻转y轴。

如何在HTML 5 Canvas中使Y轴变得更加负面？

2 个答案: