Javascript realizes very romantic bubble popping effect_javascript skills-JS Tutorial-php.cn

Javascript realizes very romantic bubble popping effect_javascript skills

ringa_lee

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

Original

1902 people have browsed it

The example in this article describes the implementation of romantic bubble popping special effects code in JavaScript. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

Implementation idea: Only one CANVAS element is needed in HTML, and the canvas is operated in Javascript
1. Draw a background image into the canvas
2. Draw a circle with a radius of 0-10px, the x coordinate is random horizontally on the screen, and the y mark is vertical Straight larger than the screen height.
The circular background color can be random, that is, various colors!
Use timer to control y--

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

Copy after login

js code

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

Copy after login

You need to add romantic elements to your website. This is a good way. I hope you can use javascript flexibly to achieve the bubble popping effect. Thank you for reading.