Contoh pelaksanaan kesan salji terbang berdasarkan kemahiran tutorial html5 canvas_html5

WBOY
Lepaskan: 2016-05-16 15:47:34
asal
1564 orang telah melayarinya

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan