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