HTML5 Canvas(倒置)坐标系

bsr*_*bsr 8 html5 canvas

我是Canvas的新手,并且想知道:

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

ved*_*ity 8

画布是倒置的,因为它对很多界面都很直观.网页更像是一张纸而不是笛卡尔图,因为你从左上角开始读下去.因此,html就是这样布局的.我假设canvas元素使用相同的坐标系来保持一致性.

您可以通过将y轴缩放-1来翻转它.您可能也需要对其进行转换,我对此不太确定,但对您的问题有一个评论应该对此有所帮助.转换函数在html中与在该帖子中几乎相同.

我大量使用html5标准草案作为参考.这是canvas 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);
Run Code Online (Sandbox Code Playgroud)


Jon*_*nas 6

如何使用另一个象限作为坐标在JPanel上绘图?

翻译(0,高度).这应该将原点重新定位到左下角.

按(1,-1)缩放.那应该围绕x轴翻转.