专业设计网站公司,网站建设中标公告,北京搜索引擎推广服务,西安自助网站建设系统这里展示白色半透明气泡如下图#xff1a;实际是动态 思路#xff1a;HTML里只需要一个CANVAS元素#xff0c;Javascript里操作canvas 1、给canvas里绘制背景图片 2、在绘制半径为0-10px的圆形#xff0c;x坐标屏幕水平随机#xff0c;y所标竖直大于屏幕高度。 圆形背景…这里展示白色半透明气泡如下图实际是动态 思路HTML里只需要一个CANVAS元素Javascript里操作canvas 1、给canvas里绘制背景图片 2、在绘制半径为0-10px的圆形x坐标屏幕水平随机y所标竖直大于屏幕高度。 圆形背景色可以是随机。那就是各种色彩了 利用计时器控制y-- !doctype html html langen head meta charsetUTF-8 meta nameGenerator contentEditPlus® meta nameAuthor content meta nameKeywords content meta nameDescription content title5多个小球往上运动/title style /style /head body div idd1 canvas idcanvas/canvas /div /body /html script var canvasdocument.getElementById(canvas); var contextcanvas.getContext(2d); canvas.widthwindow.innerWidth; canvas.heightwindow.innerHeight; function Circle(){ this.xMath.random()*canvas.width; this.ycanvas.height; this.rMath.random()*10; //绘制圆形 this.paintfunction(){ context.beginPath(); context.arc(this.x,this.y,this.r,0,Math.PI*2); context.fillStylewhite; context.globalAlpha 0.5; context.fill(); } //控制圆形移动 this.stepfunction(){ this.y--; } } var circles[]; function createCircles(){ var circlenew Circle();//?????? circles[circles.length]circle; } function paintCircles(){ for(var i0;icircles.length;i ){ circles[i].paint(); } } function stepCircles(){ for(var i0;icircles.length;i ){ circles[i].step(); } } var myimgnew Image(); myimg.srcimages/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