多个气泡向上冒出！

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

思路：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 ==0){
createCircles();
}
paintCircles();
stepCircles();
},10);
</script>

更多专业前端知识，请上【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362031.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！