0

我正在使用本教程：http ://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

在该drawEquation方法内部，还有另一个方法transformContext（第 153 行）被调用：

transformContext = function() {
        var context = this.context;

        // move context to center of canvas
        this.context.translate(this.centerX, this.centerY);

        /*
         * stretch grid to fit the canvas window, and
         * invert the y scale so that that increments
         * as you move upwards
         */
        context.scale(this.scaleX, -this.scaleY);
      };

这种方法可以绘制引用 a 的方程0,0 origin，而不是画布的左上角原点（我知道这一点，因为我将其注释掉并观察了结果）。但是，我不明白这种方法内部发生了什么。atranslate到画布的中心和a如何scale使从原点绘制方程成为可能？

代码中的注释也不是很有帮助。移动上下文或拉伸上下文是如何产生这种效果的？

请帮忙。

4

2 回答 2

0

当您调用translate()上下文时，这会添加到稍后将绘制事物的 x 和 y 坐标。因此，例如，假设我这样做：

context.translate(100, 200);
context.fillRect(0, 0, 30, 40);

矩形实际上会在 (100, 200, 30, 40) 处绘制，因为我在绘制它之前进行了翻译。

scale() 方法具有类似的效果，但不是将 x 和 y 相加，而是将它们相乘。如果其中一个比例因子是负数，那么这会产生翻转沿该轴绘制的任何内容的效果。

所以，假设我这样做：

context.translate(100, 200);
context.scale(30, -30);

现在我画一条线：

context.moveTo(0, 0);
context.lineTo(5, 8);

这相当于：

context.moveTo(0 * 30 + 100, 0 * -30 + 200);
context.lineTo(5 * 30 + 100, 8 * -30 + 200);

因此，平移和缩放的效果是，原点现在位于 (100, 200)，沿 x 方向移动 1 向右移动 30，沿 y 方向移动 1 向上移动 30。

于 2013-02-20T20:07:46.043 回答
0

它本身并不是真正从原点绘制的。事实上，方程式抽屉甚至不知道存在轴。该函数只是根据它对画布的了解进行绘制。它知道画布宽度，并且知道您告诉它将画布宽度划分为多少个“单位”（在这种情况下为 20x20，因为“比例”在每个轴上从 -10 到 10；这些参数在minX、minY、 ETC）。

它可以在中心（上下文）逐个像素地绘制东西，从 -minX （向左偏移）开始到 maxX （向右偏移），然后根据每个比例单位的像素数。在这种情况下，发生的顺序略有不同（比例在绘制之前应用，在第 136 行），但这就是要点。

于 2013-02-20T20:18:46.793 回答