Graphing a linear equation in html5

Graphing a linear equation in html5

本文关键字：in html5 equation linear Graphing      更新时间：2023-09-26

我正在使用本教程：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);
      };

这种方法可以绘制引用0,0 origin的方程式，而不是画布左上角的原点（我知道这一点，因为我对它进行了注释并观察了结果）。然而，我不明白这个方法里面发生了什么。画布中心的translate和scale如何使从原点绘制方程成为可能？

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

请帮忙。

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

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

当您在上下文中调用translate()时，这会添加到x和y坐标中，稍后将在其中绘制内容。例如，假设我这样做：

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

矩形实际上会在（10020030,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);

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

相关文章：