Как бы вы создали излучатель частиц SURFACE на основе созданной формы холста? HTMLs CANVAS JS

Question

У меня есть форма (четверть круга), который я создал с помощью функции Canvas в HTML:

• moveTo
• LineTo
• QuadraticCurveTo

Как я иду о взрывах формы в частицы, а затем вернуть их, чтобы сформировать круг?

Answer 1

Я не буду писать код для вас, потому что это займет некоторое время, и я уверен, что вы можете найти примеры в Интернете, но я расскажу вам теорию, которую вам нужно знать, чтобы сделать такую ​​вещь.

1. Создайте холст в памяти (используя document.createElement('canvas')), который никогда не будет виден на странице. Этот холст должен быть как минимум размером с ваш объект. Я собираюсь предположить, что он такой же большой, как и ваш объект. Мы назовем это tempCanvas и у него есть tempCtx
2. Наведите ваш объект на tempCtx.
3. Будет какое-то событие, которое вы точно не указали, но я уверен, что вы имеете в виду. Либо вы нажимаете кнопку, либо нажимаете на объект, и он «взрывается». Ради чего-то я предполагаю, что вы хотите, чтобы он взорвался щелчком.

Так сделать взрыв:

1. Нарисовать объект на свой нормальный контекст: ctx.drawImage(tempCanvas, x, y) так что пользователь видит что-то
2. Вы будете хотеть иметь массив пикселей для местоположения каждого пикселя в tempCanvas. Поэтому, если tempCanvas - 20x30, вам понадобится массив из [20][30].
3. Вы должны хранить данные для каждого из этих пикселей. В частности, их отправная точка, что легко, потому что исходная точка пикселя [2] [4] - (2,4)! А также их текущее местоположение, которое сначала совпадает с начальной точкой, но будет изменяться на каждом кадре.
4. При возникновении события взрыва отслеживается исходное положение мыши x и y.
5. В этот момент для каждого пикселя у вас есть вектор, который означает, что у вас есть направление. Если вы щелкнули в середине объекта, вы захотите сохранить координаты мыши (10,15) (см. Примечание 1). Итак, теперь все пиксели изображения с впуском имеют свою траекторию. Здесь немного математики, что я принимаю как должное, но если вы будете искать отдельные темы на SO или в Интернете, вы узнаете, как найти наклон/etc этих строк и продолжить их.
6. Для каждого кадра в дальнейшем вы должны взять каждый пиксель [x][y] и использовать ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1), где x и y такие же, как пиксель [x][y], а newX и newY вычисляются с использованием вектора и определяют, что следующая точка будет по его линии.

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

Это вообще идея, во всяком случае. Дайте мне знать, если это неясно.

примечание 1: Скорее всего, ваш обычный холст не будет иметь тот же размер, что и объект-explode. Возможно, объект размещен на 100 100, поэтому вы действительно нажали на 110, 115 вместо 10,15. Я опускаю это смещение только ради простоты.