如何从JS中的数学XY图转换为Canvas坐标

Question

我想绘制xy图（例如-100到 100）

使用HTML帆布和JavaScript。

说我正在使用500x500我如何将其转移到帆布坐标？我将使用canvas.translate（）...

设置中心

我想做以下操作：

var cn = $('#myCanvas')[0]
var dr = cn.getContext('2d')
xmin = -100; xmax = 100
ymin = -100  ymax = 100
canvasWidth = cn.width
canvasHeight = cn.height
cn.translate(cn.width/2, cn.height/2) // set 0,0 to center of canvas
trMoveTo(-20, 50)
trLineTo(70, -40)
stroke()
function trMoveTo(x, y) { moveTo (xtr(x), ytr(y)) }
function trLineTo(x, y) { lineTo (xtr(x), ytr(y)) }
function xtr(x) { return ???  }
function ytr(y) { return ???  }

问题使我大脑逆转卷积： - （

Answer 1

您所照顾的是从范围（例如 (xmin, xmax)到 (cmin, cmax)）的线性转换（ c表示这里的canvas坐标）。这可以直接描述为：

c = (x - xmin)/(xmax - xmin)*(cmax - cmin) + cmin

此公式首先将x重新列为[0,1]范围，然后将其映射到横跨[cmin, cmax]范围的画布坐标上。换句话说，可以直接检查该公式是线性（仿射）和 xmin映射到 cmin时， xmax映射到 cmax。

在您的特殊情况下，x-轴的cmin似乎是-canvasWidth/2，而cmax = canvasWidth/2，因此

c = (x - xmin)/(xmax - xmin)*canvasWidth - canvasWidth/2