グラフの座標変換
グラフ座標と canvas 座標の座標変換
canvas 上の2点の座標 (cx0, cy0), (cy1, cy1) とグラフ上の 2点の座標 (gx0, gy0), (gx1, gy1) を指定すると、 以下の計算ができます。
- グラフ上にある点は canvas 上ではどの位置になるか？
- canvas 上にある点は グラフ上ではどの位置になるか？
グラフを描くときにグラフの座標と canvas 座標を変換するクラスを用意します。 そして、グラフ上の点をして指定して canvas の座標を求め、 canvas に線や点を描きます。
いろいろ
canvas 座標とグラフ座標は、スクリーン座標 (ディスプレイ座標) とリアル座標 (ワールド座標) といった用語でよく出てきます。 「ビューポート変換 座標変換」などで検索して調べてください。
座標変換も、上のような 2次元のリニア変換から、対数スケール、 極座標、3次元-2次元変換などさまざまな種類があります。 複雑な話になると、難しい行列式など出てきます。
HTML の CSS でも transform (図形の拡大縮小、変形、回転) の話で出てきます。
サンプル
- TestJS_timer_div_sin01.html
タイマーでグラフを描く。
JavaScript タイマー処理