javascript - 在 JavaScript 中拉伸图形以填充 Canvas 元素

Question

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

例子：

进入这个：

谢谢！鲁尔

Answer 1

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

并每次添加 X += 步。

这里的例子：

http://jsfiddle.net/pDDTQ/

Answer 2

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