javascript实现很浪漫的气泡冒出特效_javascript技巧

程序员文章站 2022-04-09 12:23:41

...

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

实现思路：HTML里只需要一个CANVAS元素，Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形，x坐标屏幕水平随机，y所标竖直大于屏幕高度。
　　圆形背景色可以是随机，那就是各种色彩了！
　利用计时器控制y--

构建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代码

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

需要在自己的网站中添加浪漫元素，这不失为一种好的方式，希望大家灵活运用javascript实现气泡冒出特效，谢谢大家的阅读。

javascript实现很浪漫的气泡冒出特效_javascript技巧

JS实现悬浮移动窗口(悬浮广告)的特效_javascript技巧

用html+css+js实现的一个简单的图片切换特效_javascript技巧

js实现按钮控制图片360度翻转特效的方法_javascript技巧

js实现div的切换特效上一个下一个_javascript技巧

用html+css+js实现的一个简单的图片切换特效_javascript技巧

固定背景实现的背景滚动特效示例分享_javascript技巧

用表格输出1-1000之间的数字实现代码(附特效)_javascript技巧

js实现图片和链接文字同步切换特效的方法_javascript技巧

用表格输出1-1000之间的数字实现代码(附特效)_javascript技巧

js实现简单的秒表走动的时钟特效_javascript技巧