gorogoronyan FC2

HTML canvasタグ: グラフを描く

座標変換

グラフの座標変換

サンプル

TestJS_canvas_draw_rect1.html
canvas, 四角形を描く。
TestJS_canvas_graph01.html
座標変換のクラスを用意して簡単なグラフを描いてみる。
ES2015 の class で記述。
JavaScript 次の一歩 (1)
TestJS_canvas_perspective01.html
一点透視図法の座標変換のサンプル。 3次元座標を一点透視図法で canvas 座標に変換し、 補助線と座標を描画する。
JavaScript マウスイベント処理

参考 : SVG

canvas ではなく svg でグラフを描くと、 svg 要素の viewBox 属性で座標変換できるので、 グラフ座標とスクリーン座標の変換の計算が不要になります。
SVG でグラフを描く

関連

inserted by FC2 system