Javascript 在HTML5画布中，我可以使y轴向上而不是向下吗？

我在画布上画了一个图形，并努力解决y轴“向后”的问题。原点在左上角，增加的值向下而不是向上

(0,0)            (x,0)       (0,y) ^
      +-------------->             |
      |                            |
      |    CANVAS                  |     INSTEAD
      |    DOES THIS               |     OF THIS
      |                            |
      |                            +----------------->
(0,y) v                       (0,0)              (x,0) 

我知道我可以使用translate（）将原点移动到左下角

我知道我可以用scale（）反转y轴

---

这似乎是可行的，只是它会导致文本出现颠倒。有没有办法让Canvas的坐标按我期望的方式工作？

我想你最好习惯一下。原点位于左上角，大多数基于像素的视频/屏幕API都位于左上角

---

.

绘图

图形高度-y

例如：

var e=document.getElementsByTagName（'canvas'）[0]；
var c=e.getContext（'2d'）；
函数图（x，y）{
c、 fillRect（x，e.height-y，5,5）；
}
地块（100,50）；
地块（200100）；

对于更现代的设置，您可以使用

context.transform（1,0,0，-1,0，canvas.height）

。这将翻转y轴并将整个画布移动一屏

有关可用转换的更多信息：

---

这取决于你把磅秤放在哪里。我刚试过这个，一开始没用。您需要在moveTo（）之间放置.scale

ctx.arc（50,50,50,0,2*Math.PI）；
ctx.moveTo（50,50）；
比例尺（1，-1）；
ctx.lineTo（50100）；
ctx.stroke（）；

不过，在

底部>顶部的边界框中设置边界框是相当令人困惑的。当您思考几分钟后，其实并没有那么让人困惑。事实上，它远没有公认的“右>左”（这在很多人类语言中都不是真的）那么武断。范例是左上角是已知的，所有的值都从左上角出来。这是合乎逻辑的，因为当某些东西在任意大小的屏幕或文档中呈现时，这是我们唯一可以依靠的东西。我认为文档是这里的关键词。屏幕可以选择任何一种方式，这取决于它们是用来显示文本还是笛卡尔图形；但我们经常将原点放在上角的原因是，在几乎所有人类语言中，文档都是从上到下的，而不是从下到上的（从下到上的情况很少见）。HTML5画布遵循这种约定，因为HTML基于文档概念（因此是DOM）。这不是基于像素的。我采用了这种方法，但过了一段时间，在涉及y坐标的每个调用中都必须这样做，这非常乏味，容易出错，而且不必要的混乱。我更愿意将其作为一个小提示使用——如果你正在处理任何鼠标逻辑，你还需要反转鼠标事件的指针位置。汤姆，你如何反转鼠标事件的指针位置？不幸的是，这种方法现在似乎也在翻转文本。我十年前给自己的建议是使用。不要直接在画布上绘制，而是创建要绘制的对象的模型，并编写代码将模型转换为画布。这样，如果您以后想切换到另一种媒体（如SVG），就不必重写任何代码。你们所要做的就是创建一个新的翻译器。
context.translate(0, canvas.height);

context.scale(1, -1);

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