介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt;帆布id=癿yCanvas"祝辞& lt;/canvas>
& lt; script>
var c=. getelementbyid (“myCanvas");
c。宽度=300;
c。身高=500;
var ctx=c.getContext (& # 39; 2 d # 39;);
var arr=[]
函数隋(){
var r=Math.floor (math . random () * 6 + 5);
var x=Math.floor (math . random () * (c。宽度+ r - 2 r));
var y=c。高度- r;
var透明度=math . random ();
红色var=Math.floor (math . random () * 256);
绿色=Math.floor var (math . random () * 256);
var蓝色=Math.floor (math . random () * 256);
var度=0;
var=Math.floor规模(math . random () * 6 + 10);
arr.push ({
x,
y,
r,
红色,
绿色,
蓝色,
透明度,
度,
规模
})
}
setInterval(隋,40);//再实现变大和绘制
函数丹(){
ctx。clearRect (0, 0, c。宽度,c.height);
加勒比海盗。forEach((项目,我)=比;{
item.deg +=0.5;
项。y -=item.deg;
项。x +=sin (item.deg) * item.scale;
如果项目。y & lt;=item.r) {
加勒比海盗。拼接(我,1);
其他}{
ctx.beginPath ();
ctx.arc(项目。x,项目。y,项目。r, 0,数学。π* 2);
ctx。fillStyle=' rgba ($ {item.red}, {item.green},美元$ {item.blue}, {item.opacity})美元”;
ctx.fill ();
}
})
}
setInterval(丹,100);
& lt;/script>
& lt;/body>
& lt;/html>
本篇文章给大家分享的是有关使用js实现一个简单的气泡特效,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
具体内容如下
代码:
以上就是使用js实现一个简单的气泡特效,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
