Tutorial zur Verwendung von Canvas in HTML5 in Kombination mit Formeln zum Zeichnen von Partikelbewegungen. HTML5-Tutorial-Fähigkeiten

Vor kurzem möchte ich eine Webseite erstellen und einige der DEMOs, die ich während des HTML5-Lernprozesses erstellt habe, in eine Sammlung einfügen. Es wäre jedoch zu hässlich, nur eine Webseite zu erstellen und alle DEMOs auf einer zusammenzufassen um eins. Ich dachte nur, da ich Canvas gelernt habe, lasst uns mit dem Browser herumspielen und eine kleine Eröffnungsanimation erstellen.

Nachdem ich eine Weile über die Wirkung der Eröffnungsanimation nachgedacht hatte, entschied ich mich für die Verwendung von Partikeln, weil ich denke, dass Partikel mehr Spaß machen. Ich erinnere mich noch daran, dass es im ersten technischen Blogbeitrag, den ich geschrieben habe, um die Partikelisierung von Text und Bildern ging: Text und Bilder partikelisieren Damals habe ich nur lineare Bewegungen gemacht und einen kleinen 3D-Effekt hinzugefügt. Die Übungsformel ist einfach. Deshalb wollte ich diese Eröffnungsanimation einfach dynamischer gestalten.

Gehen Sie zuerst zur DEMO: http://2.axescanvas.sinaapp.com/demoHome/index.html

Ist der Effekt dynamischer als eine lineare Bewegung? Und es ist ganz einfach, vergessen Sie nicht den Titel dieses Blogbeitrags, eine kleine Formel, ein großer Spaß. Um einen solchen Effekt zu erzielen, brauchen wir lediglich unsere Mittelschule. . Oder das Physikwissen in der High School, die Formeln für beschleunigte und verzögerte Bewegung. Es ist also wirklich die kleine Tropfenformel. Der Originalposter spielt gerne mit ein paar coolen Dingen herum, obwohl er sie bei der Arbeit vielleicht nicht benutzt, aber der Spaß ist wirklich faszinierend. Darüber hinaus können Sie dadurch auch Ihre Programmierfähigkeiten stärken.

Kommen wir ohne weitere Umschweife zum Thema. Lassen Sie mich kurz das Prinzip erklären~~~

Der Kerncode der Teilchenbewegung ist genau dieser:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. update:function(time){   
2.             this.x  = this.vx*time;   
3.             this.y  = this.vy*time;   
4.     
5.             if(!this.globleDown&&this.y>0){   
6.                 var yc = this.toy - this.y;   
7.                 var xc = this.tox - this.x;   
8.     
9.                                          var 
za
10.  = 
20
11. ;                         var 
ax
12.  = 
za
13. *(xc/this.jl),                                                                  
vy
14.  = (this.vy ay*time)*0,97;                         
this.vx
15.  = vx;                    
this.vy
16.  = vy;        
17.             }else {   
18.                 var Schwerkraft = 
9
19. .8;                    var 
vy
20.  = 
dies
21. .vy Schwerkraft*Zeit;   
22.                      if(this.y>canvas.height){   
23.                      vy = -vy*0,7;                    }
25.  this.vy = vy
26.                                                               
},

Partikel haben insgesamt zwei Zustände, einen im freien Fall und einen unter Sogwirkung. Ganz zu schweigen vom freien Fall. Bevor wir über das Saugen sprechen, posten wir die Eigenschaften der Partikel:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var Punkt = Funktion(x,y,vx,vy,tox,toy,color){
 
2. dieses.x=x; 
3. dieses.y=y
 
4. dieses.vx=vx; 
 
5. dieses.vy=vy; 
6. dieses.nextox = tox
7. dieses.nextoy = Spielzeug
 
8. dieses.color = color;
this
9. .visible = true; this
.globleDown =
10. false; this
.setEnd(tox, toy);
11. }
12. setEnd:
Funktion
13. (Gift, Spielzeug){
14.                                                                                                                                                                                                                                                                                                                  .y
15.                                                                                 > },

16. x und y sind die Positionen der Partikel, vx ist die horizontale Geschwindigkeit der Partikel und vy ist die vertikale Geschwindigkeit der Partikel. Es spielt keine Rolle, ob Sie nexttox oder ähnliches kennen, es sind nur temporäre Variablen . Tox und Toy sind die Zielorte der Partikel.

    Geben Sie zunächst allen Partikeln ein Ziel, das weiter unten besprochen wird. Das heißt, Sie möchten, dass das Teilchen den Ort erreicht, und definieren dann eine Variable za als Beschleunigung. Wenn Sie den spezifischen Wert wissen möchten, erhalten Sie die ungefähren Parameter durch weitere Tests es fühlt sich ungefähr gleich an. za ist die Beschleunigung der Linie zwischen dem Partikel und dem Ziel. Daher können wir die horizontale Beschleunigung und die vertikale Beschleunigung des Partikels anhand der Position des Partikels und der Position des Ziels durch einfache trigonometrische Funktionen berechnen
    
    

    JavaScript-CodeInhalt in die Zwischenablage kopieren

    1. var ax = za*(xc/this.jl),
    2. ay = za*(yc/this.jl),
    Nachdem Sie die horizontale und vertikale Beschleunigung ermittelt haben, ist der nächste Schritt noch einfacher. Berechnen Sie direkt die Erhöhung der horizontalen und vertikalen Geschwindigkeit und ändern Sie so die Werte der horizontalen und vertikalen Geschwindigkeit.

    
    
    

    XML/HTML-CodeInhalt in die Zwischenablage kopieren

    1. vx = (this.vx ax*time)*0,97,
    2. vy = (this.vy ay*time)*0,97;

    Der Grund für die Multiplikation mit 0,97 besteht darin, einen Energieverlust zu simulieren, sodass die Partikel langsamer werden. Zeit ist der Zeitunterschied zwischen den einzelnen Frames
    Nach der Berechnung der Geschwindigkeit aktualisieren Sie einfach die Partikelposition.

    
    
    

    XML/HTML-Code
    Inhalt in die Zwischenablage kopieren

    this.x = this.vx*time;
    1. this.y = this.vy*time

    Da sich die Richtung der Verbindung zwischen dem Partikel und dem Ziel während des Fluges ständig ändert, müssen die horizontale Beschleunigung und die vertikale Beschleunigung des Partikels in jedem Frame neu berechnet werden.
    Das ist das Prinzip der Bewegung, ist es nicht ganz einfach?
    Nachdem wir nun über das Bewegungsprinzip gesprochen haben, sprechen wir über die spezifische Implementierung der obigen Animation: Initialisierung der Animation, Zeichnen der gewünschten Wörter oder Bilder auf eine Leinwand außerhalb des Bildschirms und Erhalten der Pixel der Off- Bildschirmleinwand über die getImageData-Methode. Verwenden Sie dann eine Schleife, um den gezeichneten Bereich auf der Leinwand außerhalb des Bildschirms zu finden. Da der Datenwert in imageData ein RGBA-Array ist, gehen wir davon aus, dass der letzte Wert, dh die Transparenz, größer als 128 ist gezogen. Ermitteln Sie dann den xy-Wert des Bereichs, um zu verhindern, dass zu viele Partikelobjekte eine Seitenverzögerung verursachen. Bei der Aufnahme von Pixeln erhöhen sich der x-Wert und der y-Wert jeweils um 2, wodurch sich die Anzahl verringert Partikel.

    
    
    

    XML/HTML-Code
    Inhalt in die Zwischenablage kopieren

    1. this.osCanvas = document.createElement("canvas");   
    2.         var osCtx = this.osCanvas.getContext("2d");   
    3.     
    4.         this.osCanvas.width = 1000;   
    5.         this.osCanvas.height = 150;   
    6.     
    7.         osCtx.textAlign = "center";   
    8.         osCtx.textBaseline = "middle";   
    9.         osCtx.font="70px 微软雅黑,黑体 bold";   
    10.         osCtx.fillStyle = "#1D181F"  
    11.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40);   
    12.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2 40);   
    13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas .Höhe);   
    14.     
    15.         Punkte = [];   
    16.     
    17.         for(var x=0;x<bigImageData.width;x =2){   
    18.             for(var y=0;y<bigImageData.height;y =2){   
    19.                 var i = (y*bigImageData.width   x)*4;   
    20.                 if(bigImageData.data[i 3]>128){   
    21.                     var Punkt = neu Punkt(   
    22.                         Math.random()>0.5?Math.random()*20 10:Math.random()*20 canvas.width-40,   
    23.                         -Math.random()*canvas.height*2,   
    24.                         0,   
    25.                         0,   
    26.                         x (canvas.width/2-this.osCanvas.width/2),   
    27.                         y (canvas.height/2-this.osCanvas.height/2),   
    28.                         "rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)"   
    29.                     );   
    30.                     dot.setEnd(canvas.width/2,canvas.height/2)   
    31.                     dots.push(dot);   
    32.                 }   
    33.             }   
    34.         }   

    🎜可以做出文字图片粒子化的效果了.