气泡跟随鼠标移动，并在每次点击时产生不同的变化

效果如下

！DOCTYPE html html lang=' en ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title简单的气泡效果/title style type=' text/CSS ' body {底色： # 000000；margin :0 pxoverflow : hidden }/style/head body/body/html脚本var canvas=document。createelement(' canvas ')，context=canvas.getContext('2d ')，windowW=window.screen.width，windowH=window.screen.height，Mx，My，suspended=truesuzu=[]；吊杆=[];boomks=[]；start()；帆布。onmousemove=function(e){ var loc=canvasMove(e . client x，e . client y)；Mx=loc.xmy=loc。y }；帆布。onmousedown=function(){ creatar ry(Mx，My)；暂停=!暂停};函数creatarry(a，b){ for(var I=0；i 40i) { booms[i]={ x: a，y: b，gravity: 0.3，speedX: Math.random() * 20 - 10，speedY: Math.random() * 15 - 7，radius: Math.random() * 15，color: Math.random() * 360，APC 3360 0.6 }；boomks。推动(动臂[I])；if(boomks。长度300){ boomks。shift()}；控制台。log(boomks)} }；函数循环1(){ boomks。foreach(函数(圆){ context。begin path()；context.arc(circle.x，circle.y，circle.radius，0，Math .PI * 2，假);语境。FillStyle=' HSLA '(圆圈。颜色'，100%，60%，'圆形。APC ')'；语境。fill()；movecircles(圆形)}) }函数移动圆圈(圆圈){圆圈。x=圆。SpeedX圆圈. speedY=圆圈。引力；圆圈。y=圆。迅速；circle.apc -=0.008 }函数canvasMove(x，y){ var bbox=canvas。getboundingclientrect()；返回{ x : x-bbox。左*(画布)。宽度/bbox。宽度)、y :y-bbox。顶部*(画布)。高度/bbox。高度)} }；函数start(){ document。尸体。appendchild(画布)；canvas . width=windowwcanvas . height=windowHsetInterval(Fang，25)} function Fang(){ context。清除矩形(0，0，canvas.width，canvas。高度)；loop 1()；loop()} function loop(){ var circle=new create circle(Mx，My)；suzu.push(圆圈);for(I=0；苏苏长度；I){ var ss=suzu[I]；ss.render(上下文);党卫军。update()} if(suzu。长度1000){ suzu。shift()} }函数createCircle(x，y){ this。x=xthis.y=ythis。颜色=数学。random()* 360；这个。半径=数学。random()* 25；这个。xvel=数学。random()* 5-2；this.apc=0.6重力=0.07;这个。伊夫=数学。random()* 10-3；this.render=函数(c){ c . BeginPath()；圆弧（这个。x，这个。y，这个。半径，0,数学* 2，真);c.fillStyle='hsla(' this.color '，100%，60%，' this。APC ')'；c . fill()}；this.update=function() { if(！停顿了一下){这个。伊夫=这个。重力；这个。y=这个。yvel } else { this。y-=5 }这个。x=这个。xvel这个。APC-=0.01；如果(这个。半径1){这个。radius-=0.4 } } }/script总结

以上所述是小编给大家带来了使用射流研究…实现气泡跟随鼠标移动的动画效果，希望对大家有所帮助！