Rumah > Artikel > hujung hadapan web > Javascript menyedari kemahiran effect_javascript pop gelembung yang sangat romantis
Contoh dalam artikel ini menerangkan pelaksanaan kod kesan khas pop gelembung romantis dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:
Kod khusus adalah seperti berikut:
Idea pelaksanaan: Hanya satu elemen CANVAS diperlukan dalam HTML, dan kanvas dikendalikan dalam Javascript
1 Lukiskan imej latar belakang ke dalam kanvas
2 jejari 0-10px, koordinat x adalah rawak secara mendatar pada skrin, dan tanda y adalah menegak Lurus lebih besar daripada ketinggian skrin.
Warna latar belakang bulat boleh rawak, iaitu pelbagai warna!
Gunakan pemasa untuk mengawal y--
Bina html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>5多个小球往上运动</title> <style> </style> </head> <body> <p id="d1"> <canvas id="canvas"></canvas> </p> </body> </html>
kod js
<script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; function Circle() { this.x=Math.random()*canvas.width; this.y=canvas.height; this.r=Math.random()*10; //绘制圆形 this.paint=function() { context.beginPath(); context.arc(this.x,this.y,this.r,0,Math.PI*2); context.fillStyle="white"; context.globalAlpha = 0.5; context.fill(); } //控制圆形移动 this.step=function() { this.y--; } } var circles=[]; function createCircles() { var circle=new Circle();//?????? circles[circles.length]=circle; } function paintCircles(){ for(var i=0;i<circles.length;i++){ circles[i].paint(); } } function stepCircles() { for(var i=0;i<circles.length;i++){ circles[i].step(); } } var myimg=new Image(); myimg.src="images/demo-1.png"; var timer=""; setInterval(function(){ context.drawImage(myimg,0,0); timer++; if(timer%20==0) { createCircles(); } paintCircles(); stepCircles(); },10); </script>
Anda perlu menambahkan elemen romantik pada tapak web anda. Saya harap anda boleh menggunakan javascript secara fleksibel untuk mencapai kesan gelembung.