我是Canvas的新手，想知道：
- 使用倒置的笛卡尔坐标系的原理。
- 比如说，我需要在直方图中绘制一些值。有没有一种简单的方法将画布框架旋转/映射到笛卡尔坐标系？
HTML5画布（反转）坐标系
8
- bsr
7
我现在把我的链接作为答案添加了。 - Jonas
1PC世界中的所有东西都是向下增长的，这不仅仅适用于<canvas>。帧缓冲区也是这样构建的，显示器也是这样构建的等等... - Chuck Kollars
等一下，CSS 的 X 和 Y 都在左上角为零，但是 <canvas> 只有 Y 在左上角为零，而 X 在右上角为零？有点奇怪。也许可以通过 <canvas> 上下文变量来改变这种情况？ - Asher
最好只使用<canvas> (x,y)变换。http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#transformations - Asher
@VSH 嗯？<canvas> 在右上角有 X 零吗？我不这么认为。你能指出这个信息的来源吗？ - Chuck Kollars
显示剩余2条评论
3个回答
10
画布被翻转是因为对于许多界面而言这样更直观。网页更像一张纸而不是笛卡尔坐标系图，因为你从左上角开始向下阅读。因此，HTML就是按照这种方式进行布局的。我假定画布元素为了保持一致性使用相同的坐标系。
您可以通过将y轴缩放-1来翻转它。您可能还需要进行变换，我不确定，但您的问题中有一个评论可以帮助解决这个问题。在html中，变换函数与该帖子中的函数基本相同。
我经常参考HTML5标准草案。以下是一些来自2D绘图上下文部分的内容：
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);
- vedosity
5
根据我的经验，<canvas> 的坐标系与 PC 相关的所有其他事物的坐标系是 相同 的：浏览器、页面、屏幕等。我从未遇到过任何需要完全“翻转”任何轴的情况。换句话说，如果确实存在倒置的 <canvas>，那对我来说是新闻。 - Chuck Kollars
画布坐标系相对于OP的期望是反转的，可能是因为在3D中工作，例如，y通常（但并不总是）指向上方，或者在大多数高中和一些大学级别的数学课程中，正Y轴再次指向上方。我想无论你来自哪里，都可以称之为“反转”。 - vedosity
是的，如果你参考其他事物（比如数学课），坐标可能看起来“倒置”。但是如果你留在计算机图形的世界里，就没有倒置。在这种特殊情况下，“画布”与其他类型的计算机图形相反的推论根本不成立。 - Chuck Kollars
大多数计算机应用程序的坐标系方向是从底层显示技术中派生出来的 - 只有以将要显示的方式和顺序处理数据才有意义。深入了解显示器的历史将带您穿过CRT显示器，电视的历史，最终到达标准的光栅扫描模式。从左到右，从上到下，因为这就是我们一直以来的做法。 - brichins
如果你正在使用标准几何公式，那么需要进行转换——例如计算在画布上以画布中心为旋转中心旋转一定角度后的点。 - mseifert
6
通过 (0, height) 进行平移。这应该会将原点重新定位到左下角。
通过 (1, -1) 进行缩放。这应该会沿着 x 轴翻转它。
- Jonas
4
我跳过讨论什么应该被视为倒置和非倒置笛卡尔坐标系（这基本上取决于你首次遇到该概念的上下文以及当时生效的约定）。
然而，HTML画布（以及SVG和许多与屏幕渲染相关的坐标系统）将原点放在左上角的原因仅仅是因为CRT屏幕（长期以来是主导的计算机显示技术）通过让电子束从屏幕上扫过，逐行渲染整个显示器来呈现计算机显示。对于我所听说的所有CRT，扫描线都是水平的，从左向右渲染。此外，最顶部的扫描线首先被渲染，因此左上角是所有屏幕刷新开始的地方。让那个角成为原点，X向下增加，Y向右增加，简化了将屏幕坐标映射到视频内存位置的计算（简化的计算意味着在计算机显示控制器的早期简化了硬件）。据我所知，电视屏幕也以这种方式扫描它们的显示器，从左上角开始。
（街机游戏在这方面有点富有创造性，其中相当多的游戏采用“正常”的计算机CRT，然后将其旋转90度，以获得更适合制作的视频游戏布局的屏幕。对于这些游戏，屏幕刷新不是从左上角开始的，理由很明显。）
自那时以来，将原点放在左上角并让X向下增加，Y向右增加的惯例一直保持，并似乎在各种计算机图形环境中使用。
但是我同意，数学X/Y图形的定位方式有所不同，特别是X正向朝上。
正如@franticfantom所说，您可以使用HTML Canvas API的变换功能，在Y方向进行-1比例缩放以将图形翻转为倒置状态，然后使用平移将原点从左上角移动到任何你喜欢的位置。请注意，这样的-1比例缩放变换将镜像所有内容，因此仅将其应用于图表中使用的任何文本将导致镜像或倒置的文本。必须小心地“取消反转”任何现有文本。
然而，HTML画布（以及SVG和许多与屏幕渲染相关的坐标系统）将原点放在左上角的原因仅仅是因为CRT屏幕（长期以来是主导的计算机显示技术）通过让电子束从屏幕上扫过，逐行渲染整个显示器来呈现计算机显示。对于我所听说的所有CRT，扫描线都是水平的，从左向右渲染。此外，最顶部的扫描线首先被渲染，因此左上角是所有屏幕刷新开始的地方。让那个角成为原点，X向下增加，Y向右增加，简化了将屏幕坐标映射到视频内存位置的计算（简化的计算意味着在计算机显示控制器的早期简化了硬件）。据我所知，电视屏幕也以这种方式扫描它们的显示器，从左上角开始。
（街机游戏在这方面有点富有创造性，其中相当多的游戏采用“正常”的计算机CRT，然后将其旋转90度，以获得更适合制作的视频游戏布局的屏幕。对于这些游戏，屏幕刷新不是从左上角开始的，理由很明显。）
自那时以来，将原点放在左上角并让X向下增加，Y向右增加的惯例一直保持，并似乎在各种计算机图形环境中使用。
但是我同意，数学X/Y图形的定位方式有所不同，特别是X正向朝上。
正如@franticfantom所说，您可以使用HTML Canvas API的变换功能，在Y方向进行-1比例缩放以将图形翻转为倒置状态，然后使用平移将原点从左上角移动到任何你喜欢的位置。请注意，这样的-1比例缩放变换将镜像所有内容，因此仅将其应用于图表中使用的任何文本将导致镜像或倒置的文本。必须小心地“取消反转”任何现有文本。
- IllvilJa
3
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接