多个气泡向上冒出！

这里展示白色半透明气泡如下图：实际是动态

思路：HTML里只需要一个CANVAS元素，Javascript里操作canvas

1、给canvas里绘制背景图片

2、在绘制半径为0-10px的圆形，x坐标屏幕水平随机，y所标竖直大于屏幕高度。

　　圆形背景色可以是随机。那就是各种色彩了！

　　利用计时器控制y--

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

　　

posted @ 2015-11-22 15:04  逗伴不是瓣  阅读(528)  评论(0)  编辑  收藏  举报