HTML5 холст рисования линий - PullRequest
1 голос
/ 23 декабря 2011

Я работаю над программой, которая устанавливает переменные в случайные числа, а затем создает линию на холсте, где координаты у каждый раз отличаются.В программе одна кнопка генерирует неровную линию, а другая использует некоторый код, который делает линию намного более гладкой.

Сейчас я работаю над тем, чтобы заполнить пространство под случайно сгенерированной линией, чтобы оно напоминало холм, но у меня возникло несколько проблем.

ВВ области «text / javascript» я определяю холст и его координаты, а также все случайные переменные значения y (но они еще не используются).Если нажата кнопка «ухабистая», она запускает функцию, которая устанавливает переменные координаты y для чего-либо внутри холста, а затем рисует линию.Если нажать кнопку «Сглаживание», код случайным образом устанавливает первую переменную координаты y, а затем устанавливает следующие переменные в координату, которая немного больше или немного меньше предыдущей точки, а затем рисует линию.Третья кнопка называется «заполнить».Эта кнопка запускает другую функцию, которая проверяет, нарисован ли еще холм, и начинает рисовать другую линию, используя все значения координат y +10.(Другими словами, рисует линию непосредственно под исходной линией.) Мой план состоял в том, чтобы кнопка рисовала такие линии вплоть до нижней части холста, заполняя пространство под линией.Вот где это становится странным, и я думаю, проблема в том, что кнопка «заполнить» использует информацию (хранящуюся в переменных), которая была создана в других функциях.

Что мне делать?

Заранее спасибо.

1 Ответ

1 голос
/ 24 декабря 2011

Вы просто хотите создать весь свой путь любым удобным вам способом, но не беспокойтесь о вызове ctx.stroke () or ctx.fill (), затем добавьте еще два сегмента линии: один справа внизу, затем одинвнизу слева.

Итак, вы только что нарисовали три стороны коробки.Сверху, справа и снизу.На самом деле вершина - это тонна отрезков (или кривых), но это не имеет значения, идея та же самая.Затем вы звоните ctx.fill(), и он заполнит это поле.

(Вам не нужно рисовать левую сторону, так как вы просто заполняете. Если вы поглаживаете, вы захотите вызвать ctx.close () сначала)

Таким образом, вы вызываете ctx.fill () один раз в конце, и все нижнее пространство будет заполнено

Вот живой пример: http://jsfiddle.net/wKVRR/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...