So verwenden Sie HTML5-Canvas, um Schneeflocken fallen zu lassen-H5-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die HTML5-Leinwand vorgestellt, um den besonderen Effekt fallender Schneeflocken im Detail zu erzielen. Der Effekt erzielt einen faszinierenden und realistischen Animationseffekt.

Ich habe viele HTML5-Anzeigen gesehen Der Effekt von fliegenden Schneeflocken ist in der Tat sehr faszinierend. Sie sind auch neugierig und möchten lernen, wie man den Code an vielen Orten herunterlädt Ich kenne niemanden, der dies getan hat. Analyse der Ideen und Schwierigkeiten bei der Animation.

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

Die endgültige Darstellung sieht wie folgt aus:

Abbildung 1

1. Bedarfsanalyse

1. Runde Schneeflocken

In diesem Beispiel ist die Form der Schneeflocken rund

2. Die Anzahl der Schneeflocken ist festgelegt

Beobachten Sie sorgfältig die Anzahl der weißen Schneeflocken entsprechend zu Abbildung 1. Während des Fallvorgangs sollte die Anzahl der Schneeflocken im 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. Schneeflockengrößen sind inkonsistent

Jede Schneeflocke hat eine andere Größe, was bedeutet, dass der Radius der Schneeflocke zufällig ist. Dies steht auch 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. Verwenden Sie Html5 Canvas+JavaScript, um einen Kreis zu zeichnen – eine kreisförmige Schneeflocke zu bilden

In Html5 müssen Sie dies tun Verwenden Sie Canvas. Zeichnen Sie gleichzeitig mit JavaScript einen Kreis, 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 Radius und Koordinaten zufällige Zahlen sind, während die Schneeflocken fallen , ihr Radius bleibt unverändert und ihre Koordinaten ändern sich in einem bestimmten Bereich, daher sind die Koordinaten zu diesem Zeitpunkt auch Zufallszahlen - Math.random()

3 🎜>1. Vorbereitung

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

HTML-Code:

<canvas id="mycanvas">
    您的浏览器不支持canvas画布   
</canvas>

Nach dem Login kopieren

CSS-Code:

* {   
    margin: 0;   
    padding: 0;   
}   
#mycanvas {   
    background: black;   
}

Nach dem Login kopieren

Der Effekt ist 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:

//获取mycanvas画布   
    var can = document.getElementById("mycanvas");   
    var ctx = can.getContext("2d");   
    //画布宽度   
    var wid = window.innerWidth;   
    //画布高度   
    var hei = window.innerHeight;   
    can.width=wid;   
    can.height=hei;

Nach dem Login kopieren

Der Effekt ist 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 sind 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 Betrachten Sie jede Schneeflocke als Objekt, dann umfassen die Eigenschaften dieses Objekts: Radius, Koordinaten (X, Y), dann kann ein Schneeflockenobjekt hier als var snowOject={ x:1,y:10,r:5} geschrieben werden stellt in diesem Beispiel eine kreisförmige Schneeflocke mit den Koordinaten (1,10) und dem Radius 5 dar. Da der Radius und die Koordinaten Zufallszahlen sind, generiert Math.random( ) jeweils den Radius und die Koordinaten (X, Y) für 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:

//雪花数目   
var snow = 100;   
//雪花坐标、半径   
var arr = []; //保存各圆坐标及半径   
for (var i = 0; i < snow; i++) {   
arr.push({   
x: Math.random() * wid,   
y: Math.random() * hei,   
r: Math.random() * 10 + 1   
})   
}

Nach dem Login kopieren

4. Schneeflocken zeichnen

Oben haben wir 100 Schneeflockenradien und Koordinaten (X, Y) generiert. , Das Folgende ist ein Zyklus zum Zeichnen von Schneeflocken (hier zeichnen wir Kreise). Hier definieren wir eine Funktion Der JavaScript-Code lautet wie folgt:

//画雪花   
function DrawSnow() {   
    ctx.fillStyle="white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x,p.y);   
        ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
    }   
    ctx.fill();   
  
    ctx.closePath();

Nach dem Login kopieren

Rufen Sie dann DrawSnow() auf. Funktion ist der Effekt 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 möglich). Sobald Sie dies getan haben, sind Sie nah am endgültigen Effekt

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 Änderungseffekt nur sehen, wenn wir die Webseite aktualisieren. Was wir jedoch erreichen müssen, ist, dass die Schneeflocken dies nicht tun Die bewegliche Position des Stopps. 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);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SnowFall()定义雪花飘过规则

该函数代码如下：

//雪花飘落   
function SnowFall() {   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        p.y += Math.random() * 2 + 1;   
        if (p.y > hei) {   
            p.y = 0;   
        }   
        p.x += Math.random() * 2 + 1;   
        if (p.x > wid) {   
            p.x = 0;   
    <span style="white-space:pre">    </span>}   
    }   
}

Nach dem Login kopieren

然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

//画雪花   
function DrawSnow() {   
    ctx.clearRect(0, 0, wid, hei);   
    ctx.fillStyle = "white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x, p.y);   
        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
    }   
    ctx.fill();   
    SnowFall();   
    ctx.closePath();   
}

Nach dem Login kopieren

最后执行setInterval(DrawSnow, 50);

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

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

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="js/jquery-1.8.3.min.js"></script>  
        <style type="text/css">  
            * {   
                margin: 0;   
                padding: 0;   
            }   
               
            #mycanvas {   
                background: black;   
            }   
        </style>  
    </head>  
  
    <body>  
        <canvas id="mycanvas">  
            您的浏览器不支持canvas画布   
        </canvas>  
        <script>  
            //获取mycanvas画布   
            var can = document.getElementById("mycanvas");   
            var ctx = can.getContext("2d");   
            //画布宽度   
            var wid = window.innerWidth;   
            //画布高度   
            var hei = window.innerHeight;   
            can.width = wid;   
            can.height = hei;   
            //雪花数目   
            var snow = 100;   
            //雪花坐标、半径   
            var arr = []; //保存各圆坐标及半径   
            for (var i = 0; i < snow; i++) {   
                arr.push({   
                    x: Math.random() * wid,   
                    y: Math.random() * hei,   
                    r: Math.random() * 10 + 1   
                })   
            }   
            //画雪花   
            function DrawSnow() {   
                ctx.clearRect(0, 0, wid, hei);   
                ctx.fillStyle = "white";   
                ctx.beginPath();   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    ctx.moveTo(p.x, p.y);   
                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
                }   
                ctx.fill();   
                SnowFall();   
                ctx.closePath();   
            }   
            //雪花飘落   
            function SnowFall() {   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    p.y += Math.random() * 2 + 1;   
                    if (p.y > hei) {   
                        p.y = 0;   
                    }   
                    p.x += Math.random() * 2 + 1;   
                    if (p.x > wid) {   
                        p.x = 0;   
                    }   
                }   
            }   
            setInterval(DrawSnow, 50);   
        </script>  
    </body>  
  
</html>

Nach dem Login kopieren

好了，今天分享就到这里，希望对大家的学习有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！