成长值: 550 TA的每日心情 | 开心 2024-3-24 02:35 |
---|
签到天数: 5 天 [LV.2]圆转纯熟
|
本文实例为大家分享了js实现可爱的气泡特效的具体代码,供大家参考,具体内容如下
代码:[code] Document 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 |
|