Question

我想画一个XY图（比如X和Y从-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表示此处的画布坐标）。这可以直接描述为：

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

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

在您的特定情况下，cmin轴的x-似乎为-canvasWidth/2，而cmax = canvasWidth/2则为c = (x - xmin)/(xmax - xmin)*canvasWidth - canvasWidth/2，因此

{{1}}

如何从数学xy图转换到js中的画布坐标

1 个答案: