HTML5 Canvas（倒置）坐标系 [英] HTML5 Canvas (inverted) coordinate system

问题描述

我刚开始使用Canvas，并想知道：

I am new to Canvas, and wonder:

1. 使用倒置笛卡尔坐标系的理由。


2. 说，我需要在直方图中绘制一些值。是一个简单的方法来旋转/将画布框架映射到笛卡尔坐标系。

推荐答案

画布被反转，因为它对许多界面是直观的。网页比笛卡尔图更像一张纸，因为你从左上角开始读下来。因此，html是这样布局的。我假设canvas元素使用相同的坐标系统来保持一致性。

Canvases are inverted because it is intuitive to a lot of interfaces. Web pages are more like a sheet of paper than a cartesian graph, because you start at the top left and read down. Therefore, html is laid out like that. I assume the canvas element uses the same coordinate system for consistency.

您可以通过将y轴缩放-1来翻转它。你可能需要转换它，我不知道这一点，但有一个对你的问题的评论，应该有助于。变换函数在HTML中和在那篇文章中的变化函数几乎相同。

You can flip it by scaling the y axis by -1. You might need to transform it as well, i'm not sure about that, but there's a comment on your question that should help with that. The transforming functions are pretty much the same in html as they are in that post.

我使用html5标准草案作为参考。以下是 canvas 2d上下文部分中的一些内容：

I use the html5 standard draft a lot for reference. Here's some content from the 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);

这篇关于HTML5 Canvas（倒置）坐标系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！