Verblassen Sie einen Teil eines HTML 5 Canvas nach dem Zeichnen.

Question

Soweit ich verstehe, erlaubt das Canvas von HTML5 keinen Zugriff auf Elemente, nachdem sie gezeichnet wurden, weil sie sofort in den Grafikmodus übergehen.

Ich bin gerade auf die großartige Demonstration der HTML5-Audio-API unter http://www.storiesinflight.com/jsfft/visualizer/index.html gestoßen und frage mich, wie die Kreise nach dem Zeichnen schrumpfen und verblassen. (Um dies zu sehen, klicken Sie einfach auf Pause und beobachten Sie, wie jedes Bogen-Element in Nichts verschwindet.) Wie wird das gemacht? Schnipsel des JS wären großartig.

Vielen Dank.

Hinweis: Ich glaube, dass Firefox 4 derzeit der einzige Browser ist, auf dem dies läuft.

Answer 1

Es gibt zwei Fragen, die du stellen könntest, also werde ich versuchen, beide zu beantworten.

Die kurze Antwort lautet: "sie behalten alles im Blick und zeichnen es ein- und ausblendend nach." Wenn du dich nur fragst, wie du anfängst, bestimmte Zustände zu verfolgen, also wie man Canvas dazu bringt, so zu tun, als würde es im beibehaltenen Modus zeichnen, siehe diese Tutorials.

In dem spezifischen Beispiel, das du genannt hast, müssen sie nicht einmal etwas im Blick behalten, wenn sie nicht wollen, da die Größe und Position der Kreise auf der aktuellen Audioeingabe zur aktuellen Sekunde basieren. Sie löschen einfach die gesamte Leinwand und nehmen die Eingabe und verwandeln sie in entsprechend große und platzierte Kreise alle X Millisekunden.

Also verblassen die Kreise nicht. Sie werden vollständig gelöscht und kleinere Kreise werden stattdessen gezeichnet. Es erzeugt den Effekt eines Ausblendens, aber sie halten wahrscheinlich keinen Zustand fest.

Answer 2

Der Code kann ein Kreis-Objekt speichern, mit Eigenschaften wie Radius, x und y.

Er kann dann diese Eigenschaften animieren und sie auf dem Leinwand mit einem Intervall ähnlich einem Spiele-Loop zeichnen.

Er greift nicht auf DOM-Elemente zu.