本文實例講述了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實現氣泡冒出特效，謝謝大家的閱讀。
新聞熱點
疑難解答
