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.