js实现可爱的气泡特效-6ren

js实现可爱的气泡特效

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现可爱的气泡特效由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了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 
         >