masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Contoh tutorial HTML5 Canvas super cool kembang api mekar kod pelaksanaan kemahiran tutorial_html5

Contoh tutorial HTML5 Canvas super cool kembang api mekar kod pelaksanaan kemahiran tutorial_html5

WBOY
Lepaskan： 2016-05-16 15:47:16
asal
3181 orang telah melayarinya

Ini adalah animasi Kanvas HTML5 yang hebat. Ia akan mensimulasikan kesan khas animasi bunga api yang mekar dalam kehidupan sebenar kita. Kesannya sangat realistik, tetapi ia adalah simulasi komputer ia, kesannya masih agak teruk, hehe. Satu perkara yang luar biasa tentang animasi Kanvas HTML5 ini ialah prestasinya pada dasarnya tiada lag pada Chrome, walaupun anda menyalakan banyak bunga api.

Mari analisa secara ringkas proses dan kod untuk melaksanakan kesan khas bunga api HTML5 ini, terutamanya kod HTML, kod CSS dan kod Javascript.

　Kod HTML:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <div id=”gui”>div>
  2. <div id=”bekas kanvas”> <div id=”gunung2″>div> 
  3. <div id=”gunung1″ >div><div id=”skyline”>div> div>

Struktur HTML adalah sangat mudah, iaitu bekas kanvas dibina dan kami akan menggunakan JS untuk menjana objek Kanvas dalam bekas ini. Anda akan mengetahuinya dengan melihat kod JS akhir.

　Kod CSS:

Kod CSSSalin kandungan ke papan keratan
  1. #kanvas-bekas { latar belakang: #000 url(bg.jpg); tinggi: 400px; kiri: 50%; margin: -200px 0 0 -300px; kedudukan: mutlak; atas: 50%; lebar: 600px; z-indeks: 2;   
  2. } kanvas { kursor: palang silang; paparan: sekat; kedudukan: saudara; z-indeks: 3;   
  3. } kanvas:aktif { kursor: palang silang;   
  4. } #skyline { latar belakang: url (skyline.png) ulang-x 50% 0; bawahbawah: 0; tinggi: 135px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
  5. } #mountains1 { latar belakang: url (gunung1.png) ulang-x 40% 0; bawahbawah: 0; tinggi: 200px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
  6. } #mountains2 { latar belakang: url (gunung2.png) ulang-x 30% 0; bawahbawah: 0; tinggi: 250px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
  7. } #gui { kanankanan: 0; kedudukan: tetap; atas: 0; z-indeks: 3;   
  8. }  

Kod CSS bukanlah sesuatu yang istimewa, ia mentakrifkan warna latar belakang dan sempadan.

Seterusnya ialah kod Javascript yang paling penting.

　Kod JavaScript:

Kod JavaScriptSalin kandungan ke papan keratan
  1. self.init = fungsi(){       
  2.     self.dt = 0;   
  3.         self.oldTime = Date.now();   
  4.         self.canvas = document.createElement('canvas');                   
  5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');   
  6.         self.canvas.onselectstart = fungsi() { return false >;   
  7.         };   
  8.   
  9.         self.canvas.width = self.cw = 600;   
  10.         self.canvas.height = self.ch = 400;       
  11.   
  12.         zarah diri = [];       
  13.         self.partCount = 30;   
  14.         bunga api sendiri = [];       
  15.         self.mx = self.cw/2;   
  16.         self.my = self.ch/2;   
  17.         self.currentHue = 170;   
  18.         self.partSpeed = 5;   
  19.         self.partSpeedVariance = 10;   
  20.         self.partWind = 50;   
  21.         self.partFriction = 5;   
  22.         self.partGravity = 1;   
  23.         self.hueMin = 150;   
  24.         self.hueMax = 200;   
  25.         self.fworkSpeed = 2;   
  26.         self.fworkAccel = 4;   
  27.         self.hueVariance = 30;   
  28.         self.flickerDensity = 20;   
  29.         self.showShockwave = palsu;   
  30.         self.showTarget = benar;   
  31.         self.clearAlpha = 25;   
  32.   
  33.         self.canvasContainer.append(self.canvas);   
  34.         self.ctx = self.canvas.getContext('2d');   
  35.         self.ctx.lineCap = 'bulat';   
  36.         self.ctx.lineJoin = 'bulat';   
  37.         self.lineWidth = 1;   
  38.         self.bindEvents();               
  39.         self.canvasLoop();   
  40.   
  41.         self.canvas.onselectstart = fungsi() { return false >;   
  42.         };   
  43.   
  44.     };  

Kod JS ini terutamanya membina objek Kanvas dalam bekas kanvas, dan memulakan penampilan dan sifat animasi objek kanvas.

Kod JavaScriptSalin kandungan ke papan keratan
  1. var Zarah = fungsi(x, y, warna){ ini.x = x; ini.y = y; ini.coordLast = [   
  2.             {x: x, y: y},   
  3.             {x: x, y: y},   
  4.             {x: x, y: y}   
  5.         ]; ini.sudut = rand(0, 360); ini.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeedVariance bahagianSpeedVariance)); ini.geseran = 1 - diri.partFriction/100; ini.gravity = self.partGravity/2; ini.hue = rand(hue-self.hueVariance, hue self.hueVariance); ini.kecerahan = rand(50, 80); ini.alpha = rand(40,100)/100; ini.pereputan = rand(10, 50)/1000; ini.wind = (rand(0, self.partWind) - (self.partWind/2))/25; ini.lineWidth = self.lineWidth;   
  6.     };   
  7.   
  8.     Particle.prototype.update = fungsi(indeks){ var radian =  ini.sudut * Math.PI / 180; var vx = Math.cos(radians) * ini.speed; var vy = Math.sin(radians) * ini.speed   ini .graviti; ini.kelajuan *= ini.geseran; ini.coordLast[2].x = ini.coordLast[1].x; ini.coordLast[2].y = ini.coordLast[1].y; ini.coordLast[1].x = ini.coordLast[0].x; ini.coordLast[1].y = ini.coordLast[0].y; ini.coordLast[0].x = ini.x; ini.coordLast[0].y = ini.y; ini.x  = vx * self.dt; ini.y  = vy * self.dt; ini.sudut  = ini.angin; ini.alpha -= ini.pereputan; jika(!hitTest(0,0,self.cw,self.ch,ini.x-ini.jejari, ini.y-ini.jejari, ini .jejari*2, ini.jejari*2) |  ini.alpha < ){                       
  9.             self.particles.splice(indeks, 1);       
  10.         }               
  11.     };   
  12.   
  13.     Particle.prototype.draw = fungsi(){ var coordRand = (rand(1,3) -1);   
  14.         self.ctx.beginPath();                                   
  15.         self.ctx.moveTo(Math.round(ini.coordLast[coordRand].x), Math.round(ini.coordLast[coordRand].y));   
  16.         self.ctx.lineTo(Math.round(ini.x), Math.round(ini .y));   
  17.         self.ctx.closePath();                   
  18.         self.ctx.strokeStyle = 'hsla(' ini.hue <🎜 , 100%, ' ini.kecerahan '%, ' ini.alfa ')';   
  19.         self.ctx.stroke(); jika(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; jika(rand(0, inverseDensity) === inverseDensity){   
  20.                 self.ctx.beginPath();   
  21.                 self.ctx.arc(Math.round(ini.x), Math.round(ini .y), rand(ini.lineWidth,ini.lineWidth 3)/2, 0, Math.PI*2, palsu)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;   
  22.                 self.ctx.fillStyle = 'hsla(' ini.hue .hue . , 100%, ' ini.kecerahan '%, ' randAlpha ' )';   
  23.                 self.ctx.fill();   
  24.             }       
  25.         }   
  26.     };  
　　这段JS代码的功能是实现烟花爆炸后的小颗粒的绘制，从draw方法中可店以，可以，小颗粒的绘制。点，烟花颗粒即可在这个范围的随机点中散落。

Kod JavaScript复制内容到剪贴板
  1. var Bunga api = fungsi(startX, startY, targetX, targetY){ ini.x = startX; ini.y = startY; ini.startX = startX; ini.startY = startY; ini.hitX = salah; ini.hitY = palsu; ini.coordLast = [   
  2.             {x: startX, y: startY},   
  3.             {x: startX, y: startY},   
  4.              {x: startX, y: startY}   
  5.         ]; ini.targetX = targetX; ini.targetY = targetY; ini.speed = self.fworkSpeed; ini.angle = Math.atan2(targetY - startY, targetX - startX); ini.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); ini.pecutan = self.fworkAccel/100; ini.hue = self.currentHue; ini.kecerahan = rand(50, 80); ini.alpha = rand(50,100)/100; ini.lineWidth = self.lineWidth; ini.targetRadius = 1;   
  6.     };   
  7.   
  8.     Firework.prototype.update = fungsi(indeks){   
  9.         self.ctx.lineWidth = ini.lineWidth;   
  10.   
  11.         vx = Math.cos(ini.sudut) * ini.kelajuan,   
  12.         vy = Math.sin(ini.sudut) * ini.kelajuan; ini.kelajuan *= 1   ini.pecutan; ini.coordLast[2].x = ini.coordLast[1].x; ini.coordLast[2].y = ini.coordLast[1].y; ini.coordLast[1].x = ini.coordLast[0].x; ini.coordLast[1].y = ini.coordLast[0].y; ini.coordLast[0].x = ini.x; ini.coordLast[0].y = ini.y; jika(self.showTarget){ jika(ini.targetRadius < 8){ ini.targetRadius  = .25 * self.dt;   
  13. <🎜>            } lain { ini.targetRadius = 1 * self.dt;       
  14.             }   
  15.         } jika(ini.startX >= iniini 🎜>.targetX){ jika(ini.x   vx <= ini.targetX){ ini.x = ini.targetX; ini.hitX = benar;   
  16.             } lain { ini.x  = vx * self.dt;   
  17.             }   
  18.         } lain { jika(ini.x vx >= ini.targetX){ ini.x = ini .targetX; ini.hitX = benar;   
  19.             } lain { ini.x  = vx * self.dt;   
  20.             }   
  21.         } jika(ini.startY >= ini.targetY){ jika(ini.y   vy <= ini.targetY){ ini.y = ini.targetY; ini.hitY = benar;   
    22.             } 
  22. lain { ini.y  = vy * self.dt;   
    23.             }   
    24.         } 
  24. lain { jika(ini.y vy >= ini.targetY){ ini.y = ini .targetY; ini.hitY = benar;   
    25.             } 
  25. lain { ini.y  = vy * self.dt;   
    26.             }   
    27.         } jika(ini.hitX && ini.hitY){  var randLetupan = rand(0, 9);   
  27.             self.createParticles(ini.targetX, ini.targetY, ini 🎜>.hue);   
  28.             diri.bunga api.splice(indeks, 1);                       
  29.         }   
  30.     };   
  31.   
  32.     Firework.prototype.draw = fungsi(){   
  33.         self.ctx.lineWidth = ini.lineWidth; var coordRand = (rand(1,3)-1);                       
  34.         self.ctx.beginPath();                               
  35.         self.ctx.moveTo(Math.round(ini.coordLast[coordRand].x), Math.round(ini.coordLast[coordRand].y));   
  36.         self.ctx.lineTo(Math.round(ini.x), Math.round(ini .y));   
  37.         self.ctx.closePath();   
  38.         self.ctx.strokeStyle = 'hsla(' ini.hue ini.kecerahan '%, ' ini.alfa ')';   
    39.         self.ctx.stroke(); 
  39. jika(self.showTarget){   
    40.             self.ctx.save();   
    41.             self.ctx.beginPath();   
    42.             self.ctx.arc(Math.round(
  42. ini.targetX), Math.round(ini .targetY), ini.targetRadius, 0, Math.PI*2, false)   
    43.             self.ctx.closePath();   
    44.             self.ctx.lineWidth = 1;   
    45.             self.ctx.stroke();   
    46.             self.ctx.restore();   
    47.         } jika(self.showShockwave){   
  47.             self.ctx.save();   
  48.             self.ctx.translate(Math.round(ini.x), Math.round(ini .y));   
  49.             self.ctx.rotate(ini.shockwaveAngle);   
  50.             self.ctx.beginPath();   
  51.             self.ctx.arc(0, 0, 1*(ini.speed/5), 0, Math.PI,  benar);   
  52.             self.ctx.strokeStyle = 'hsla(' ini.hue '> , 100%, ' ini.kecerahan '%, ' rand(25, 60)/100 ')';   
  53.             self.ctx.lineWidth = ini.lineWidth;   
  54.             self.ctx.stroke();   
  55.             self.ctx.restore();   
  56.         }                                    
  57.     };  

　　这段JS代码是创建烟花实例的，我们也可以从draw方法中看出，当我仇為的，我们也可以从draw方法中看出，当我仇為炠时，烟花发射的目的地就在那个点上。

　　这款HTML5 Canvas烟花效果的核心代码就是这样，谢谢阅读，希望能帮到大家说家，我们会努力分享更多优秀的文章。

Label berkaitan：
html5烟花绽放效果 html5canvas HTML5动画教程
sumber：php.cn
Artikel sebelumnya：html5 menggunakan kanvas untuk melukis kemahiran tutorial line_html5 Artikel seterusnya：Kemahiran tutorial jam lukisan HTML5 animation_html5
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
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2245
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2385
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1994
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1881
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1950
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan