我是Canvas的新手，并且想知道：
答案 0 :(得分：8)
画布被反转，因为它对很多界面都很直观。网页更像是一张纸而不是笛卡尔图，因为你从左上角开始读下去。因此，html就是这样布局的。我假设canvas元素使用相同的坐标系来保持一致性。
您可以通过将y轴缩放-1来翻转它。您可能也需要对其进行转换，我对此不太确定，但对您的问题有一个评论应该对此有所帮助。转换函数在html中与在该帖子中的函数几乎相同。
我大量使用html5标准草案作为参考。以下是canvas 2d context section的一些内容：
void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);
答案 1 :(得分：6)
来自How can I draw on JPanel using another quadrant for the coordinates?
翻译（0，高度）。这应该将原点重新定位到左下角。
按（1，-1）缩放。那应该围绕x轴翻转。
答案 2 :(得分：4)
我正在跳过关于什么应该被认为是倒置和非倒置笛卡尔坐标系的讨论（这几乎是你第一次遇到这个概念的背景以及那里有哪些约定）。
然而，HTML画布（和SVG以及与屏幕渲染相关的许多其他坐标系统）将原点放在左上角的原因仅仅是因为CRT屏幕（长期以来是主导的计算机显示技术）渲染了计算机通过让电子束逐行扫过屏幕进行显示，直到整个显示器被渲染。对于我听说过的所有CRT，扫描线都是水平的，从左到右渲染。此外，最上面的扫描线首先渲染，因此左上角是所有屏幕刷新开始的位置。让这个角落为X，向下增加，Y向右增加，简化了将屏幕坐标映射到视频内存位置的计算（简化计算意味着计算机显示控制器早期的简化硬件）。 AFAIK，电视屏幕也以这种方式扫描他们的显示器，从左上角开始。
（街机游戏在这方面有点创新，其中不少人采用“普通”计算机CRT，然后将其旋转90度以获得更适合视频游戏布局的屏幕对于那些游戏，由于显而易见的原因，屏幕刷新并没有从左上角开始。）
这个惯例是将orig放在左上角，让X向下增加，向右Y向下，从那些早期开始就已经停滞不前，似乎在各种计算机图形环境中使用。
但我同意，数学X / Y图表是另外的，尤其是X向上是正向。
正如@franticfantom所说，您可以使用HTML Canvas API的转换功能在Y方向上执行-1的缩放，以使图形上下颠倒，然后使用转换从左上角移动origo到无论你喜欢什么地方。请注意，这样的缩放-1变换将反映所有内容，因此将其应用于您在图形中使用的任何文本只会导致镜像或颠倒文本。必须小心谨慎地“解决”任何文本。