在HTML5作圖的線性方程

我使用本教程：http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/在HTML5作圖的線性方程

裏面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如何能夠從原點繪製方程式？

代碼中的註釋也沒有幫助。如何移動環境或拉伸它造成這種影響？

請幫助。

來源

2013-02-20 dopatraman

它並不真正從原點繪製，本身。實際上，公式抽屜甚至不知道有軸存在。該函數僅根據對畫布的瞭解進行繪製。它知道一個畫布的寬度，它知道你告訴它有多少「單位」將畫布寬度分成（在這種情況下爲20x20，因爲「比例」是從每個軸上的-10到10;這些參數在minX中提供， minY等）。

它可以在中心（上下文）中逐個像素地繪製事物，從-minX（左側的偏移）開始，並前進到maxX（右側偏移），然後「縮放」它基於每個刻度單位的像素數量。在這種情況下，這種情況發生的順序稍有不同（該比例在繪製之前應用於第136行），但這就是要點。

來源

2013-02-20 20:18:46 Marc

當您在上下文中調用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移動到u第30頁。

來源

2013-02-20 20:07:46

在HTML5作圖的線性方程

回答

相關問題