Maison > Article > interface Web > Javascript réalise des compétences d'effet de bulle très romantiques_javascript

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

ringa_leeoriginal: 2018-05-14 16:12:411900parcourir

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des exemples d'algorithmes classiques couramment utilisés dans les compétences javascript_javascriptArticle suivant：Explication détaillée des exemples d'algorithmes classiques couramment utilisés dans les compétences javascript_javascript

Articles Liés

Voir plus