Я не собираюсь писать код для вас, потому что это займет некоторое время, и я уверен, что вы можете найти примеры в Интернете, но я расскажу вам теорию, которую вы должны знать, чтобы сделать такая вещь.
- Создайте холст в памяти (используя
document.createElement('canvas')), который никогда не будет отображаться на странице. Этот холст должен быть как минимум такого же размера, как ваш объект. Я собираюсь предположить, что он точно такой же большой, как ваш объект. Мы назовем это tempCanvas и оно имеет tempCtx
- Нарисуйте свой объект в tempCtx.
- Будет какое-то событие, которое вы точно не упомянули, но я уверен, что вы имеете в виду. Либо вы нажимаете кнопку, либо нажимаете на объект, и он «взрывается». Ради выбора чего-то, я предполагаю, что вы хотите, чтобы оно взорвалось при клике.
Итак, чтобы сделать взрыв:
- Нарисуйте объект в обычном контексте:
ctx.drawImage(tempCanvas, x, y) чтобы пользователь что-то увидел
- Вам понадобится массив пикселей для расположения каждого пикселя в tempCanvas. Поэтому, если tempCanvas - 20x30, вам нужно, чтобы массив
[20][30] соответствовал.
- Вы должны хранить данные для каждого из этих пикселей. В частности, их отправная точка, что легко, потому что отправной точкой пикселя [2] [4] является (2,4)! А также их текущее местоположение, которое сначала идентично начальной точке, но будет меняться в каждом кадре.
- Когда происходит взрыв, следите за исходной позицией мыши x и y.
- На данный момент для каждого пикселя у вас есть вектор, что означает, что у вас есть направление. Если вы щелкнули в середине объекта, вы захотите сохранить координаты мыши (10,15) (см. Примечание 1). Так что теперь все пиксели изображения, которое должно быть взорвано, имеют свою траекторию. Здесь есть немного математики, которую я считаю само собой разумеющимся, но если вы будете искать отдельные темы в SO или в Интернете, вы узнаете, как найти наклон / etc этих линий и продолжить их.
- Для каждого кадра в дальнейшем вы должны взять каждый пиксель
[x][y] и использовать ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1), где x и y совпадают с [x][y] пикселя, а newX и newY рассчитываются с использованием вектора и находят следующую точку. быть вдоль его линии.
Результатом будет каждый пиксель изображения, нарисованный в месте, которое находится немного дальше от исходной точки щелчка. Если вы продолжите делать этот кадр за кадром, он будет выглядеть так, как будто объект взорвался.
Так или иначе, это общая идея. Дайте мне знать, если что-то из этого неясно.
примечание 1: Скорее всего, ваш обычный холст не будет того же размера, что и объект для взрыва. Может быть, объект находится на 100,100, поэтому вы действительно нажали на 110, 115 вместо 10,15. Я опускаю это смещение только ради простоты.