那爱 发表于 2024-3-10 13:24:27

js实现可爱的气泡特效

本文实例为大家分享了js实现可爱的气泡特效的具体代码,供大家参考,具体内容如下
http://www.cbvy.com//data/attachment/forum/202010/03/104106ugklj93r3s73ijg3.jpg


代码:      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
页: [1]
查看完整版本: js实现可爱的气泡特效