0

我最近看到了很多与画布图形相关的 javascript 项目和库，想知道它们如何处理坐标系。在画布上绘制形状和矢量时，点是基于笛卡尔平面计算并为画布转换的，还是一切都直接为画布计算？

我尝试通过绘制所有切线来绘制一个圆，直到线的交点开始类似于曲线，并发现我熟悉的笛卡尔平面与 Web 浏览器使用的坐标系之间的差异非常令人困惑。圆的函数，例如，“y^2 + x^2 = r^2”需要转换为“(y-1)^2 + (x-1)^2 = r^2”可以在画布上看到。然后负斜率是画布上的正斜率，一切都会颠倒：/。

对我来说，最简单的思考方法是假装笛卡尔平面的原点位于画布的中心，并相应地调整我的坐标。在 500 x 500 的画布上，中心是 250,250，所以如果我最终在 50,50 处绘制一个点，它将在 (250 + 50, 250 - 50) = (300, 200) 处绘制。

我觉得我把这件事复杂化了，但我无法用干净的方式来使用画布。

4

2 回答 2

2

当前的实践也许可以通过 David Flanagan 的书“JavaScript : The Definitive Guide”中的一句话来举例说明，它说

某些画布操作和属性（例如提取原始像素值和设置阴影偏移）始终使用此默认坐标系

（默认坐标系是画布的坐标系）。它继续

在大多数画布操作中，当您指定一个点的坐标时，它会被视为当前坐标系中的一个点 [例如您提到的笛卡尔平面@Walkerneo]，而不是默认坐标系中的一个点。

为什么使用“当前坐标系”比直接使用画布 cs 更有用？

首先，我相信，因为它独立于画布本身，它与屏幕相关联（更具体地说，默认坐标系尺寸以像素表示）。例如，使用笛卡尔（正交）坐标系可以让您（嗯，对我来说，显然 :-D）很容易根据您想要绘制的内容来指定您的绘图，而将如何绘制它的任务留给Canvas API 提供的转换。特别是，您可以用绘图的自然单位表达尺寸，并执行缩放和平移以适合（或不适合，视情况而定......）您的绘图到画布。

此外，使用转换通常是构建绘图的更清晰的方法，因为它允许您从底层坐标系统“更远”并根据更高级别的操作（“缩放”、“旋转”、“平移”和更一般的“转换”）。上面提到的书提供了一个非常好的例子来展示这种方法的强大功能，使用画布坐标用更少的线条绘制科赫（分形）雪花是可能的（如果有的话）。

于 2013-03-13T09:10:38.170 回答
0

HTML5 画布与大多数图形系统一样，使用坐标系，其中 (0,0) 位于左上角，x 轴和 y 轴分别从左到右和自上而下。如果您考虑如何创建一个只有一块内存的图形系统，这是有道理的：将坐标 (x,y) 映射到内存插槽的最简单方法是取x+w*y，其中 w 是一条线的宽度。

这意味着画布坐标系与您在数学中使用的坐标系在两个方面有所不同：(0,0) 不是像通常那样的中心，并且 y 向下而不是向上增长。最后一部分是什么让你的数字颠倒了。

您可以在画布上设置转换，使坐标系更像您习惯的：

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(250,250);   // Move (0,0) to (250, 250)
ctx.scale(1,-1);          // Make y grow up rather than down
于 2013-03-13T07:16:20.313 回答