Question

我正在使用本教程：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如何能够从原点绘制方程式？

代码中的注释也没有用。如何移动上下文或拉伸它会导致这种效果？

请帮忙。

Answer 1

当您在上下文中调用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。

Answer 2

它本身并非真正从原点中汲取灵感。事实上，方程抽屉甚至不知道存在轴。该函数只是基于它对画布的了解而绘制。它知道画布宽度，它知道有多少＆＃34;单位＆＃34;你告诉它将画布宽度划分为（在这种情况下为20x20，因为＆＃34;比例＆＃34;在每个轴上从-10到10;这些参数在minX，minY中提供等等。）

它可以在中心（上下文）逐个像素地绘制事物，从-minX（向左侧偏移）开始并向前进行到maxX（向右偏移），然后是＆＃34;规模＆＃34;它基于每个比例单位的像素数。在这种情况下，这种情况会以略微不同的顺序发生（在绘制之前，在第136行应用比例），但这是要点。

在html5中绘制线性方程

2 个答案: