Исчезать часть холста HTML 5 после рисования

Question

Насколько я понимаю, холст HTML5 не позволяет получить доступ к элементам после их отрисовки, потому что они сразу становятся графическим режимом.

Я только что натолкнулся на великолепную демонстрацию HTML5 Audio API на http://www.storiesinflight.com/jsfft/visualizer/index.html, и мне интересно, как круги уменьшаются и уменьшаются после их отрисовки.(Чтобы увидеть, просто нажмите «пауза» и наблюдайте, как каждый элемент дуги исчезает в никуда.) Как это сделать?Отрывки JS были бы великолепны.

Большое спасибо.

Примечание: я считаю, что Firefox 4 - единственный браузер, на котором он работает в настоящее время.

Answer 1

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

Краткий ответ: «Они отслеживают все и перерисовывают, исчезают и исчезают».Если вам просто интересно, как начать отслеживать какое-то состояние, то есть заставить Canvas работать так, как если бы он рисовал в режиме сохранения, см. эти учебные пособия .

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

Таким образом, круги не исчезают.Они стираются полностью, а вместо этого рисуются меньшие круги.Это дает эффект затухания, но, вероятно, не отслеживает состояние.

Answer 2

Код может хранить объект circle со свойствами, такими как radius, x и y.

. Затем он может анимировать эти свойства и рисовать его на canvasс интервалом, похожим на игровой цикл.

Он не не обращается к элементам DOM.