在 JavaScript 中拉伸图形以填充 Canvas 元素答案

【问题标题】：Stretching a Graph to Fill the Canvas Element in JavaScript在 JavaScript 中拉伸图形以填充 Canvas 元素
【发布时间】：2011-06-04 16:30:36
【问题描述】：

涉及 javascript 画布的快速问题... 我有一个设定点（用一条线连接）我想在 400x300 画布元素上绘制图形。我会不断地增加更多的分数。我需要将线条拉伸以填满整个画布（不留不必要的空间）。

例子：

进入这个：

谢谢！ C.鲁尔

【问题讨论】：

标签： javascript math canvas graphing

【解决方案1】：

你想通过canvasWidth / (number of points - 1)找到步骤

每次都加上 X += 步。

此处示例：

http://jsfiddle.net/pDDTQ/

【讨论】：

我有 x 和 y 坐标。另外，如果这些点超出了画布的高度和宽度会怎样？

【解决方案2】：

区分内部画布大小和可见大小。 400x300 是您的可见尺寸，由 style="width:400px; height:300px" 设置。每次有新点（例如 400,500）时，您设置 canvas.width=400;画布.高度=500；并重新绘制整个图表。从某个点开始，您可能想要调整线条的宽度。

【讨论】：