Home > Article > Web Front-end > Javascript realizes very romantic bubble popping effect_javascript skills

Javascript realizes very romantic bubble popping effect_javascript skills

ringa_leeOriginal: 2018-05-14 16:12:411856browse

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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of commonly used classic algorithm examples in javascript_javascript skillsNext article：Detailed explanation of commonly used classic algorithm examples in javascript_javascript skills

See more

Javascript realizes very romantic bubble popping effect_javascript skills

Related articles