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

2019-11-20 11:10:05

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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实现气泡冒出特效，谢谢大家的阅读。

上一篇：javascript常用经典算法实例详解

下一篇：jQuery插件jquery-barcode实现条码打印的方法