js实现可爱的气泡特效
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera2. 《CSS3实战》笔记--渐变设计（一)3. CSS3实例分享之多重背景的实现(Multiple backgrounds)4. asp(vbs)Rs.Open和Conn.Execute的详解和区别及&H0001的说明5. chatGPT教我写compose函数的详细过程6. 在 XSL/XSLT 中实现随机排序7. JavaScript避免嵌套代码浅析8. XML在语音合成中的应用9. 用css截取字符的几种方法详解（css排版隐藏溢出文本）10. Vue Element UI 表单自定义校验规则及使用
网公网安备