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

0,0 originこのメソッドを使用すると、キャンバスの左上の原点ではなく、a を参照する方程式をグラフ化できます (コメントアウトして結果を観察したので、これを知っています)。ただし、このメソッド内で何が起こっているのかわかりません。translateaをキャンバスの中心に、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 を加算する代わりに乗算します。スケール係数の 1 つが負の場合、その軸に沿って描画したものを反転させる効果があります。

だから、私がこれをするとします：

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

それ自体は、元から描いているわけではありません。実際、方程式ドロワーは、軸が存在することさえ知りません。この関数は、キャンバスについて知っていることに基づいて描画するだけです。それはキャンバスの幅を知っており、そのキャンバスの幅を分割するように指示した「単位」の数を知っています (「スケール」は各軸で -10 から 10 であるため、この場合は 20x20 です。これらのパラメーターは、、、で提供されますminX) minY。等）。

-minX (左側へのオフセット) から始まり、maxX (右側へのオフセット) まで進む中心 (コンテキスト) でピクセルごとに物事を描画し、次にそれに基づいて「スケーリング」することができます。スケール単位あたりのピクセル数。この場合、これは少し異なる順序で行われます (136 行目で、描画の前にスケールが適用されます) が、それが要点です。

于 2013-02-20T20:18:46.793 に答える