Растяжение графика для заполнения элемента Canvas в JavaScript

Question

Быстрый вопрос, связанный с холстом javascript ... У меня есть заданные точки (связанные с линией), я хочу построить график на элементе холста 400x300. Я буду постоянно добавлять больше очков. Мне нужно, чтобы линия растягивалась, чтобы заполнить весь холст (не оставляя лишнего пространства).

Пример:

в это:

Спасибо! C.Ruhl

Answer 1

Вы хотите найти шаг, выполнив canvasWidth / (number of points - 1)

и добавление X + = step каждый раз.

Пример здесь:

http://jsfiddle.net/pDDTQ/

Answer 2

Различают внутренний размер холста и видимый размер.400x300 - ваш видимый размер, установленный style = "width: 400px; height: 300px".Каждый раз, когда появляется новая точка (например, 400 500), вы устанавливаете canvas.width = 400;canvas.height = 500;и пересчитать весь график.С определенной точки вы можете настроить ширину линии.