Rumah >hujung hadapan web >tutorial js >Javascript menyedari kemahiran effect_javascript pop gelembung yang sangat romantis

Javascript menyedari kemahiran effect_javascript pop gelembung yang sangat romantis

ringa_leeasal: 2018-05-14 16:12:411929semak imbas

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.

Kenyataan：

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 sebelumnya：Penjelasan terperinci tentang contoh algoritma klasik yang biasa digunakan dalam kemahiran javascript_javascriptArtikel seterusnya：Penjelasan terperinci tentang contoh algoritma klasik yang biasa digunakan dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi