多个气泡向上冒出！
這里展示白色半透明氣泡如下圖：實際是動態(tài)
思路：HTML里只需要一個CANVAS元素，Javascript里操作canvas
1、給canvas里繪制背景圖片
2、在繪制半徑為0-10px的圓形，x坐標(biāo)屏幕水平隨機，y所標(biāo)豎直大于屏幕高度。
圓形背景色可以是隨機。那就是各種色彩了！
利用計時器控制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>
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結(jié)
- 上一篇： CSS3里的display
- 下一篇： 页面添加锚点后如何点击不改变URL？