Contoh pelaksanaan kesan salji terbang berdasarkan kemahiran tutorial html5 canvas_html5

Contoh dalam artikel ini menerangkan cara mencapai kesan bersalji berdasarkan kanvas HTML5 Anda boleh melihat kesan salji yang hebat dengan menjalankan contoh ini. Seperti yang ditunjukkan di bawah:

Kod utama adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

< /canvas>

window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext ("2d");

//dimensi kanvas
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
kanvas. ketinggian = H;

//zarah kepingan salji
var mp = 3000; //zarah maksimum
zarah var = [];
untuk(var i = 0; i < mp; i )
{
zarah.tolak({
x: Math.random ()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*3 1, //radius
d: Math.random()*mp //density
})
}

//Mari lukis kepingan
function draw()
{
ctx.clearRect(0 , 0, W, H);

ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
/* ctx.fillStyle = "#FF0000";*/
ctx.beginPath();
for(var i = 0; i < mp; i )
{
var p = zarah[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
kemas kini();
}

//Fungsi untuk menggerakkan kepingan salji
//sudut akan menjadi bendera tambahan yang berterusan. Fungsi Sin dan Cos akan digunakan padanya untuk mencipta pergerakan menegak dan mendatar bagi kepingan
sudut var = 0;
kemas kini fungsi()
{
sudut = 0.01;
untuk(var i = 0; i < mp; i )
{
var p = zarah[i];
//Mengemas kini koordinat X dan Y
//Kami akan menambah 1 pada fungsi cos menghalang nilai negatif yang akan menyebabkan serpihan bergerak ke atas
//Setiap zarah mempunyai ketumpatan sendiri yang boleh digunakan untuk membuat pergerakan ke bawah berbeza bagi setiap serpihan
//Mari menjadikannya lebih rawak dengan menambah dalam jejari
p.y = Math.cos(sudut p.d) 1 p.r/2;
p.x = Math.sin(sudut) * 2;

//Menghantar kembali kepingan dari atas apabila ia keluar
//Mari jadikan ia lebih organik dan biarkan serpihan masuk dari kiri dan kanan juga.
if(p.x > W || p.x < 0 || p.y > H)
{
if (i%3 > 0) //66.67% daripada kepingan
{
zarah[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d };
}
lain
{
//Jika kepingan itu keluar dari kanan
jika(Math.sin(sudut) > 0)
{
//Masukkan dari
zarah[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
lain
{
//Masuk dari kanan
zarah[i] = {x: W 5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}

//gelung animasi
setInterval(draw, 15);
}

代码分析如下：

这行代码改变雪花半径大小：

复制代码

代码如下:

r: Math.random()*3 1, //radius

Diese Codezeile ändert die Fallgeschwindigkeit von Schneeflocken:

Code kopieren

Der Code lautet wie folgt:

setInterval(draw, 15);

Diese Linie ändert die Schneeflockendichte:

Code kopieren

Der Code lautet wie folgt:

var mp = 3000; //max. Partikel

Ich glaube, dass das, was in diesem Artikel beschrieben wird, einen gewissen Referenzwert für die HTML5-WEB-Programmierung aller hat.