Kanvas HTML5 merealisasikan kesan khas kemahiran tutorial snowflakes

Saya telah melihat banyak paparan di Internet yang menunjukkan kesan html5 salji terbang, yang sememangnya sangat menarik Saya percaya bahawa semua orang teruja seperti saya dan juga sangat ingin tahu dan ingin mengkaji cara melaksanakan kod tersebut ini boleh dimuat turun dari banyak tempat Kod sumber, tetapi saya tidak tahu idea orang lain dan analisis kesukaran semasa membuat animasi sedemikian.

Saya baru sahaja belajar banyak hari ini, dan saya memanfaatkan masa sekarang untuk membedah langkah demi langkah daripada analisis permintaan, mata pengetahuan dan pengaturcaraan Jika saya cuba memperbodohkan diri sendiri di hadapan awak, tolong jangan gelak.

Penyampaian akhir adalah seperti berikut:

Gambar 1

1. Analisis permintaan

1. Kepingan salji bulat

Bentuk kepingan salji dalam contoh ini menggunakan bulatan

2. Bilangan kepingan salji tetap

Perhatikan dengan teliti bilangan kepingan salji putih mengikut Rajah 1. Semasa proses jatuh, bilangan kepingan salji dalam keseluruhan gambar perlu diperbaiki Keperluan ini perlu diperolehi melalui pemerhatian dan analisis kami. Ini konsisten dengan adegan yang kita lihat dalam kehidupan sebenar di mana kepingan salji berterbangan di seluruh langit.

3. Saiz kepingan salji tidak konsisten

Setiap kepingan salji mempunyai saiz yang berbeza, bermakna jejari kepingan salji adalah rawak. Ini konsisten dengan adegan di mana kita melihat kepingan salji terbang di seluruh langit dalam kehidupan sebenar.

4. Kedudukan kepingan salji bergerak

Kepingan salji jatuh, dan secara semula jadi kedudukannya juga bergerak.

2. Mata pengetahuan

1 Gunakan JavaScript Kanvas Html5 untuk melukis bulatan - membentuk kepingan salji bulat

Dalam Html5, anda perlu menggunakan Kanvas dan menggunakan JavaScript untuk melukis bulatan untuk membentuk kepingan salji bulat - arka(x, y, r, mula, berhenti

2. Nombor rawak—hasilkan kepingan salji bulat dengan jejari dan koordinat yang berbeza

Dalam contoh ini, apabila halaman web dimuatkan buat kali pertama, sejumlah kepingan salji dengan jejari dan kedudukan yang berbeza perlu dijana, jadi jejari dan koordinat ialah nombor rawak semasa kepingan salji jatuh, jejarinya kekal tidak berubah dan koordinat berada dalam julat tertentu, jadi koordinat juga adalah nombor rawak pada masa ini——Math.random()

3. Pemrograman

1. Persediaan

Letakkan kanvas dan tetapkan warna latar belakang seluruh badan kepada hitam

Kod HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

<kanvas id="mycanvas" >
Penyemak imbas anda tidak menyokong kanvas
kanvas>

Kod CSS:

Kod CSSSalin kandungan ke papan keratan

* {
margin: 0;
lapik: 0;
sebagai {
: hitam; }
Kesan pada masa ini adalah seperti berikut:

Nota: kanvas mempunyai ketinggian dan lebar yang dimulakan secara lalai, jadi anda tidak perlu risau tentangnya

2. Kanvas memenuhi skrin

Kod JavaScript adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

//Dapatkan kanvas mycanvas
var boleh = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
wid = window.innerWidth
hei = window.innerHeight boleh.width=wid;
boleh.height=hei;

3. Permulaan menjana bilangan kepingan salji yang tetap

Menurut analisis permintaan di atas dan tafsiran mata pengetahuan, pertama sekali, bilangan kepingan salji adalah tetap, jadi kita perlu menentukan pembolehubah var salji = 100 di sini diandaikan bahawa bilangan kepingan salji ialah 100; Apabila menghasilkan kepingan salji, jejari dan kedudukan setiap kepingan salji adalah berbeza Kami menganggap setiap kepingan salji sebagai objek, maka sifat objek ini termasuk: jejari, koordinat (X, Y), maka objek kepingan salji boleh ditulis sebagai. var snowOject={x:1,y:10,r:5}, di sini mewakili kepingan salji bulat dengan koordinat (1,10) dan jejari 5 dalam contoh ini, memandangkan jejari dan koordinat ialah nombor rawak, Matematik digunakan . rawak() menjana jejari dan koordinat (X, Y) untuk 100 kepingan salji masing-masing

Kemudian kami mempunyai 100 kepingan salji di sini, jadi untuk memudahkan operasi seterusnya, kami menggunakan tatasusunan untuk menyimpan 100 objek kepingan salji ini.

Kod JavaScript adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

//Bilangan kepingan salji

salji = 100;
arr = []; //Simpan koordinat dan jejari setiap bulatan
(var i = 0; i < salji; i ) { arr.push({
x: Math.random() * wid,
y: Math.random() * hei,
r: Math.random() * 10 1
})
}

4. Lukiskan kepingan salji

Kami telah menghasilkan 100 jejari kepingan salji dan koordinat (X, Y) di atas adalah menggunakan kanvas untuk melukis kepingan salji (di sini, kami melukis bulatan di sini Kod JavaScript adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

//Melukis kepingan salji
fungsi DrawSnow() {
ctx.fillStyle="putih";
untuk (var i = 0; i < salji; i ) {
var p = arr[i];
ctx.arc(p.x,p.y,p.r,0,2*Math.PI,
); }
ctx.fill();
ctx.closePath();

Anda boleh cuba memuat semula halaman web beberapa kali untuk melihat sama ada kepingan salji dengan saiz dan kedudukan yang berbeza akan dijana (biasanya mungkin apabila anda melakukan ini, anda hampir dengan kesan akhir

). Nota: Oleh kerana 100 bulatan perlu dilukis di sini, koordinat permulaan lukisan ditakrifkan semula setiap kali bulatan dilukis: ctx.moveTo(p.x,p.y); jika tidak, kesan pelik akan berlaku. cubalah

5. Kepingan salji berkibar

Kami telah melukis 100 kepingan salji di atas Malangnya, kami hanya dapat melihat kesan perubahan dengan menyegarkan halaman web, tetapi apa yang perlu kami capai ialah kepingan salji itu terus bergerak. Mula-mula kita perlu menggunakan fungsi setInterval untuk terus melukis semula kepingan salji Selang di sini ialah 50 milisaat: setInterval(DrawSnow,50);

Pada masa yang sama, koordinat (X, Y) setiap kepingan salji perlu sentiasa ditukar (dalam julat tertentu Kepingan salji di sini jatuh dari kiri atas ke kanan bawah, jadi nilai koordinat X dan Y). setiap kepingan salji berada dalam Terus meningkat, kemudian kami menggunakan fungsi SnowFall() untuk mentakrifkan peraturan jatuh kepingan salji

Kod fungsi adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

//雪花飘落
fungsi SnowFall() {
untuk (var i = 0; i < salji; i ) {
> var p = arr[i];
p.y = Math.random() * 2 1;
jika (p.y > hei) {
p.y = 0;
}
p.x = Math.random() * 2 1;
jika (p.x > wid) {
p.x = 0;
"white-space:pre"> }
}
}

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

此时DrawSnow函数定义如下：

Kod JavaScript复制内容到剪贴板

//画雪花
fungsi DrawSnow() {
ctx.clearRect(0, 0, wid, hei);
ctx.fillStyle = "putih";
ctx.beginPath();
untuk (var i = 0; i < salji; i ) {
> var
ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false

最后执行setInterval(DrawSnow, 50);

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

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

Kod XML/HTML复制内容到剪贴板

>
<html>
<kepala>
<meta charset="utf- 8" />
<tajuk>tajuk>
<skrip src="js/ jquery-1.8.3.min.js">skrip>
<gaya taip="teks/ css">
* {
margin: 0;
pelapis: 0;
}
#mycanvas {
latar belakang: hitam;
}
gaya>
kepala>
<badan>
<kanvas id="mycanvas" >
Penyemak imbas anda tidak menyokong kanvas
kanvas>
<skrip>
//Dapatkan kanvas mycanvas
var boleh = dokumen.getElementById("mycanvas");
ctx = boleh.getContext("2d"); //Lebar kanvas
var
= tetingkap.lebar dalam //Ketinggian kanvas
var
= tetingkap.innerHeight
= lebar
= hei; //Bilangan kepingan salji
var
= 100 //Koordinat kepingan salji, jejari
var
= []; //Simpan koordinat dan jejari setiap bulatan untuk (var
= 0; i < salji; i ) { arr.push({
x: Math.random() * wid,
y: Math.random() * hei,
r: Math.random() * 10 1
})
}
//画雪花
Funktion DrawSnow() {
ctx.clearRect(0, 0, wid, hei);
ctx.fillStyle = "white";
ctx.beginPath();
für 🎜> Schnee; 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();
}
//雪花飘落
Funktion SnowFall() {
für 🎜> Schnee; i ) { var p = arr[i];
p.y = Math.random() * 2 1; if (p.y > hei) {
} p.x = Math.random() * 2 1;
if (p.x > wid) {
}
}
} setInterval(DrawSnow, 50);
Skript>

Körper

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

Label berkaitan：

canvas html5

sumber：php.cn

Artikel sebelumnya：Struktur dan semantik HTML5 (3): Kemahiran tutorial elemen tahap blok semantik_html5 Artikel seterusnya：Struktur dan semantik HTML5 (2): Structure_html5 kemahiran tutorial

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

Artikel terbaru oleh pengarang