HTML5 Canvas(倒置)坐标系

Question

我是 Canvas 的新手，想知道:

1. 使用倒笛卡尔坐标系的基本原理。
2. 比如说，我需要在直方图中绘制一些值。是一种将 Canvas 框架旋转/映射到笛卡尔坐标系的简单方法。？

Answer 1

Canvas 是倒置的，因为它对很多界面来说很直观。网页更像是一张纸而不是笛卡尔图，因为您从左上角开始向下阅读。因此，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);