javascript实现很浪漫的气泡冒出特效
编程学习 2021-07-04 21:03www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了javascript实现很浪漫的气泡冒出特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例讲述了javascript实现很浪漫的气泡冒出特效代码，分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
实现思路：HTML里只需要一个CANVAS元素，Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形，x坐标屏幕水平随机，y所标竖直大于屏幕高度。
圆形背景色可以是随机，那就是各种色彩了！
利用计时器控制y--
构建html
<!doctype html> <html lang="en"> <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> <div id="d1"> <canvas id="canvas"></canvas> </div> </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实现气泡冒出特效，谢谢大家的阅读。