Javascript réalise des compétences d'effet de bulle très romantiques

Javascript réalise des compétences d'effet de bulle très romantiques_javascript

ringa_lee

Libérer： 2018-05-14 16:12:41

original

1899 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation du code d'effets spéciaux d'éclatement de bulles romantiques en JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

Idée d'implémentation : Un seul élément CANVAS est nécessaire en HTML, et le canevas est exploité en Javascript
1 Dessinez une image d'arrière-plan dans le canevas
2 Dessinez un cercle avec un. rayon de 0 à 10 px, la coordonnée x est aléatoire horizontalement sur l'écran et la marque y est verticale droite plus grande que la hauteur de l'écran.
La couleur de fond circulaire peut être aléatoire, c'est-à-dire différentes couleurs !
Utilisez la minuterie pour contrôler y--

Construisez le code 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>

Copier après la connexion

code 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>

Copier après la connexion

Vous devez ajouter des éléments romantiques à votre site Web. C'est un bon moyen. J'espère que vous pourrez utiliser javascript de manière flexible pour obtenir l'effet d'éclatement de bulles.