suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript realisiert sehr romantische Blaseneffekt-Javascript-Fähigkeiten

Javascript realisiert sehr romantische Blaseneffekt-Javascript-Fähigkeiten

ringa_lee
ringa_leeOriginal
2018-05-14 16:12:411904Durchsuche

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>


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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung häufig verwendeter klassischer Algorithmusbeispiele in Javascript_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung häufig verwendeter klassischer Algorithmusbeispiele in Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen