在html5画布中绘制具有正y轴和负y轴点的折线

Question

我必须在HTML5画布中绘制折线，其中y轴点为正和负。 例如y = [5,10,50，-150,80，-90]。 x轴间隔为1. x = [1,2,3,4,5,6]。

我试图使用translate（）和scale（）来绘制这个，但到目前为止还没有成功。

如果有人可以指出如何在画布上绘制正负点，那将会很棒。

Answer 1

假设您的画布是1000乘1000并且您想绘制x中0到7的点和y中的-200到100。 然后你需要做两件事：

1）重新定位，使原点位于（0,333.3）像素坐标。 您可以使用translate(0, 333.3)执行此操作。

2）缩放使得x为7出现在像素位置1000处，y为100出现在像素位置-333.3（现在是窗口的顶部）。 你可以用scale(1000 / 7, -333.3 / 100)来做到这一点。

更一般地说，对于画布尺寸（ w ， h ）和轴范围xmin ... xmax和ymin ... ymax ，你会这样做：

ctx.translate(w * xmax / (xmax - xmin), h * ymax / (ymax - ymin));
ctx.scale(w / (xmax - xmin), -h / (ymax - ymin));