Javascript realisiert sehr romantische Blaseneffekt-Javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript realisiert sehr romantische Blaseneffekt-Javascript-Fähigkeiten

ringa_lee

Freigeben： 2018-05-14 16:12:41

Original

1853 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierung des Codes für romantische Blasen platzende Spezialeffekte in JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

Implementierungsidee: Es wird nur ein CANVAS-Element in HTML benötigt und die Leinwand wird in Javascript betrieben
1 Zeichnen Sie ein Hintergrundbild in die Leinwand
2 Zeichnen Sie einen Kreis mit Der Radius beträgt 0-10 Pixel, die x-Koordinate ist zufällig horizontal auf dem Bildschirm und die y-Markierung ist vertikal. Gerade größer als die Bildschirmhöhe.
Die kreisförmige Hintergrundfarbe kann zufällig sein, also verschiedene Farben!
Verwenden Sie den Timer, um y--

HTML erstellen

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

Nach dem Login kopieren

JS-Code
zu steuern

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

Nach dem Login kopieren

Sie müssen Ihrer Website romantische Elemente hinzufügen. Ich hoffe, Sie können Javascript flexibel verwenden, um den Bubble-Popping-Effekt zu erzielen.