Javascript 在html5中绘制线性方程

我正在使用本教程：

在

drawerequation

方法中，还有另一个方法

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);
      };

这种方法可以绘制引用

0,0原点

的方程式，而不是画布左上角原点（我知道这一点，因为我注释了它并观察了结果）。然而，我不明白这个方法里面发生了什么。

如何将

转换到画布的中心，以及

比例

如何使从原点绘制方程成为可能

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

---

请提供帮助。

当您在上下文中调用

translate（）

时，这将添加到稍后将绘制内容的x和y坐标。例如，假设我这样做：

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

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

矩形实际上是在（1002003040）处绘制的，因为我在绘制它之前进行了翻译

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

那么，假设我这样做：

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

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);

---

因此，平移和缩放的效果是原点现在位于（100200），在x方向上移动1会向右移动30，在y方向上移动1会向上移动30。

它本身并不是从原点绘制的。事实上，方程式绘制者甚至不知道有轴存在。函数只是根据它对画布的了解进行绘制。它知道画布宽度，它知道您告诉它将画布宽度分成多少个“单位”（在本例中为20x20，因为每个轴上的“比例”从-10到10；这些参数在

minX

，

minY

等中提供）

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