HTML5-Canvas realisiert den besonderen Effekt fallender Schneeflocken. Tutorial-Fähigkeiten für HTML5

Ich habe im Internet viele Darstellungen gesehen, die den Effekt fliegender HTML5-Schneeflocken zeigen. Ich glaube, dass jeder genauso aufgeregt ist wie ich und auch sehr neugierig ist und lernen möchte, wie man den Code implementiert Diese können von vielen Orten heruntergeladen werden Quellcode, aber ich kenne die Ideen und Analysen anderer Leute nicht über die Schwierigkeiten bei der Erstellung solcher Animationen.

Ich habe heutzutage einfach viel gelernt und nutze die Zeit jetzt, um es Schritt für Schritt von der Bedarfsanalyse über Wissenspunkte bis hin zur Programmierung zu analysieren Du, bitte lache nicht.

Das endgültige Rendering sieht wie folgt aus:

Bild 1

1. Bedarfsanalyse

1. Runde Schneeflocke

Die Schneeflockenform in diesem Beispiel verwendet einen Kreis

2. Die Anzahl der Schneeflocken ist festgelegt

Beobachten Sie sorgfältig die Anzahl der weißen Schneeflocken gemäß Abbildung 1. Während des Fallvorgangs sollte die Anzahl der Schneeflocken im gesamten Bild festgelegt werden. Diese Anforderung muss durch unsere Beobachtung und Analyse ermittelt werden. Dies steht im Einklang mit der Szene, die wir im wirklichen Leben sehen, wo Schneeflocken über den ganzen Himmel fliegen.

3. Die Größe der Schneeflocken ist inkonsistent

Jede Schneeflocke hat eine andere Größe, was bedeutet, dass der Radius der Schneeflocke zufällig ist. Dies steht im Einklang mit der Szene, in der wir im wirklichen Leben Schneeflocken über den ganzen Himmel fliegen sehen.

4. Die Position der Schneeflocken verändert sich

Schneeflocken fallen und natürlich verändern sich auch ihre Positionen.

2. Wissenspunkte

1. Zeichnen Sie mit Html5 Canvas JavaScript einen Kreis – so entsteht eine kreisförmige Schneeflocke

In Html5 müssen Sie Canvas verwenden und JavaScript verwenden, um einen Kreis zu zeichnen, um eine kreisförmige Schneeflocke zu bilden – arc(x, y, r, start, stop);

2. Zufallszahlen – erzeugen kreisförmige Schneeflocken mit unterschiedlichen Radien und Koordinaten

In diesem Beispiel muss beim ersten Laden der Webseite eine bestimmte Anzahl von Schneeflocken mit unterschiedlichen Radien und Positionen generiert werden, sodass der Radius und die Koordinaten Zufallszahlen sind, während die Schneeflocken fallen, ihr Radius bleibt unverändert und die Koordinaten liegen innerhalb eines bestimmten Bereichs, sodass die Koordinaten zu diesem Zeitpunkt ebenfalls Zufallszahlen sind – Math.random()

3. Programmierung

1. Vorbereitung

Legen Sie eine Leinwand auf und stellen Sie die Hintergrundfarbe des gesamten Körpers auf Schwarz ein

HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <canvas id="mycanvas" >
2. Ihr Browser unterstützt kein Canvas
3. Leinwand> 

CSS-Code:

CSS-CodeInhalt in die Zwischenablage kopieren

1. * {
2. Marge: 0;
3. Auffüllung: 0;
4. }
5.                                                       
6. #mycanvas { 
7. Hintergrund: schwarz; }
9. Der Effekt ist zu diesem Zeitpunkt wie folgt:

Hinweis: Die Leinwand hat standardmäßig eine initialisierte Höhe und Breite, sodass Sie sich darüber keine Sorgen machen müssen

2. Die Leinwand füllt den Bildschirm

Der JavaScript-Code lautet wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. //Holen Sie sich die Leinwand von mycanvas
2. var can = document.getElementById("mycanvas");
3. var ctx = can.getContext("2d");
4. //Leinwandbreite
5. var wid = window.innerWidth
6. //Leinwandhöhe
7. var hei = window.innerHeight; can.width=wid;
8. can.height=hei;
Der Effekt ist zu diesem Zeitpunkt wie folgt:

3. Die Initialisierung erzeugt eine feste Anzahl von Schneeflocken

Gemäß unserer obigen Bedarfsanalyse und Interpretation der Wissenspunkte ist zunächst die Anzahl der Schneeflocken festgelegt, daher müssen wir eine Variable definieren: var schnee = 100. Hier wird davon ausgegangen, dass die Anzahl der Schneeflocken 100 beträgt. Bei der Erzeugung von Schneeflocken sind der Radius und die Position jeder Schneeflocke unterschiedlich. Wir betrachten jede Schneeflocke als Objekt. Zu den Eigenschaften dieses Objekts gehören: Radius, Koordinaten (X, Y). Dann kann ein Schneeflockenobjekt geschrieben werden var snowOject={x:1,y:10,r:5} stellt hier eine kreisförmige Schneeflocke mit den Koordinaten (1,10) und dem Radius 5 dar, da der Radius und die Koordinaten Zufallszahlen sind, wird Mathematik verwendet. random() generiert Radius und Koordinaten (X, Y) für jeweils 100 Schneeflocken;

Dann haben wir hier 100 Schneeflocken. Um nachfolgende Vorgänge zu erleichtern, verwenden wir ein Array, um diese 100 Schneeflockenobjekte zu speichern.

Der JavaScript-Code lautet wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

//Anzahl der Schneeflocken

1. var
2. Schnee = 100; //Schneeflockenkoordinaten, Radius
3. var arr = [];
4. //Speichern Sie die Koordinaten und den Radius jedes Kreises for (
5. var i = 0; i < snow; i ) { arr.push({ x: Math.random() * wid,
6. y: Math.random() * hei,
7. r: Math.random() * 10 1
8. })
9. }
11. 4. Schneeflocken zeichnen

Wir haben oben 100 Schneeflockenradien und Koordinaten (X, Y) generiert. Im Folgenden wird die Leinwand zum Zeichnen von Schneeflocken verwendet (hier zeichnen wir Kreise).

Der JavaScript-Code lautet wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. //Schneeflocken zeichnen
2. Funktion DrawSnow() {
3. ctx.fillStyle="white"
4. ctx.beginPath();
5.  for (var i = 0; i < snow; i ) {
6. var p = arr[i];
ctx.moveTo(p.x,p.y);
ctx.arc(p.x,p.y,p.r,0,2*Math.PI,
8. false);
}
ctx.fill();
ctx.closePath();

Dann rufen Sie die Funktion DrawSnow() auf. Der Effekt ist wie folgt:

Sie können versuchen, die Webseite mehrmals zu aktualisieren, um zu sehen, ob Schneeflocken unterschiedlicher Größe und Position erzeugt werden (normalerweise ist dies möglich). Sobald Sie dies tun, sind Sie dem endgültigen Effekt nahe

Hinweis: Da hier 100 Kreise gezeichnet werden müssen, werden die Zeichenstartkoordinaten jedes Mal neu definiert, wenn ein Kreis gezeichnet wird: ctx.moveTo(p.x,p.y); sonst treten seltsame Effekte auf. Probieren Sie es aus

5. Schneeflocken flattern

Wir haben oben 100 Schneeflocken gezeichnet. Leider können wir den veränderten Effekt nur sehen, wenn wir die Webseite aktualisieren, aber was wir erreichen müssen, ist, dass sich die Schneeflocken weiter bewegen.

Zuerst müssen wir die Funktion setInterval verwenden, um die Schneeflocken kontinuierlich neu zu zeichnen. Das Intervall beträgt hier 50 Millisekunden: setInterval(DrawSnow,50);

Gleichzeitig müssen die Koordinaten (X, Y) jeder Schneeflocke ständig geändert werden (innerhalb eines bestimmten Bereichs). Die Schneeflocken fallen hier von links oben nach rechts unten, also die X- und Y-Koordinatenwerte ​​​​Jede Schneeflocke nimmt weiter zu, dann verwenden wir eine Funktion SnowFall(), um die Regeln für das Fallen der Schneeflocken zu definieren

Der Funktionscode lautet wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. //雪花飘落   
2. Funktion SnowFall() {   
3.     for (var i = 0; i < snow; i ) {   
4.         var p = arr[i];   
5.         p.y  = Math.random() * 2   1;   
6.         if (p.y > hei) {   
7.             p.y = 0;   
8.         }   
9.         p.x  = Math.random() * 2   1;   
10.         if (p.x > wid) {   
11.             p.x = 0;   
12.     "white-space:pre">    }   
13.     }   
14. }  

然后将该函数放入DrawSnow()执行, 注意：我们每隔50毫毛重画雪花, 必须擦除画布, 所以DrawSnow()函Die Funktion „clearRect()“ wird verwendet, um Folgendes anzuzeigen: ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下:

JavaScript-Code复制内容到剪贴板

1. //画雪花   
2. Funktion DrawSnow() {   
3.     ctx.clearRect(0, 0, wid, hei);   
4.     ctx.fillStyle = "white";   
5.     ctx.beginPath();   
6.     for (var i = 0; i < snow; i ) {   
7.         var p = arr[i];   
8.         ctx.moveTo(p.x, p.y);   
9.         ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
10.     }   
11.     ctx.fill();   
12.     SnowFall();   
13.     ctx.closePath();   
14. }   

Zum Beispiel setInterval(DrawSnow, 50); 

OK, 经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了.

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）:

XML/HTML-Code复制内容到剪贴板

1. >  
2. <html>  
3.   
4.     <Kopf>  
5.         <meta charset="utf- 8" />  
6.         <Titel>Titel>  
7.         <script src="js/ jquery-1.8.3.min.js">script>  
8.         <Stil Typ="text/ css">  
9.             * {   
10.                 Marge: 0;   
11.                 padding: 0;   
12.             }   
13.                
14.             #mycanvas {   
15.                 Hintergrund: schwarz;   
16.             }
17. Stil>
18.  Kopf> 
20. <Körper>
21.  <canvas id="mycanvas" >
22. Ihr Browser unterstützt kein Canvas
23. Leinwand>
24. <Skript>
25. //Mycanvas-Leinwand holen
26. var can = document.getElementById("mycanvas");
27. var ctx = can.getContext("2d");
//Leinwandbreite
var
29. wid = window.innerWidth; //Leinwandhöhe
30. var
hei
31. = window.innerHeight; can.width
= wid;
32. can.height = hei;
//Anzahl der Schneeflocken
33. var Schnee
=
34. 100
;
35. //Schneeflockenkoordinaten, Radius var arr = [] //Speichern Sie die Koordinaten und den Radius jedes Kreises
36. für (var
i
37. = 0; i
<
38. Schnee; i ) { arr.push({ x: Math.random() * wid,
39.                     y : Math.random() * hé,   
40.                     r: Math.random() * 10   1   
41.                 })   
42.             }   
43.             //画雪花   
44.             fonction DrawSnow() {   
45.                 ctx.clearRect(0, 0, wid, hei);   
46.                 ctx.fillStyle = "blanc";   
47.                 ctx.beginPath();   
48.                 pour (var i = 0; i < neige; i ) {   
49.                     var p = arr[i];   
50.                     ctx.moveTo(p.x, p.y);   
51.                     ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
52.                 }   
53.                 ctx.fill();   
54.                 SnowFall();   
55.                 ctx.closePath();   
56.              }  
57.             //雪花飘落   
58.             fonction SnowFall() {   
59.                 pour (var i = 0; i < neige; i ) {   
60.                     var p = arr[i];   
61.                     p.y  = Math.random() * 2   1 ;   
62.                     si (p.y > hei) {   
63.                         p.y = 0;   
64.                      }   
65.                     p.x  = Math.random() * 2   1 ;   
66.                     si (p.x > wid) {   
67.                         p.x = 0;   
68.                     }   
69.                 }   
70.             }   
71.             setInterval(DrawSnow, 50);   
72.         script>  
73.     corps>  
74.   
75. html>  
76.   

好了，今天分享就到这里，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/tangyifeng/p/5253629.html