南强小屋 Design By 杰米
本文实例为大家分享了js实现可爱的气泡特效的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
c.width = 300;
c.height = 500;
var ctx = c.getContext('2d');
var arr = []
function sui() {
var r = Math.floor(Math.random() * 6 + 5);
var x = Math.floor(Math.random() * (c.width - 2 * r)) + r;
var y = c.height - r;
var opacity = Math.random();
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var deg = 0;
var scale = Math.floor(Math.random() * 6 + 10);
arr.push({
x,
y,
r,
red,
green,
blue,
opacity,
deg,
scale
})
}
setInterval(sui, 40);
// 再实现变大和绘制
function dan() {
ctx.clearRect(0, 0, c.width, c.height);
arr.forEach((item, i) => {
item.deg += 0.5;
item.y -= item.deg;
item.x += Math.sin(item.deg) * item.scale;
if (item.y <= item.r) {
arr.splice(i, 1);
} else {
ctx.beginPath();
ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${item.red},${item.green},${item.blue},${item.opacity})`;
ctx.fill();
}
})
}
setInterval(dan, 100);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,气泡特效
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js实现可爱的气泡特效的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。