JavaScript canvas实现雨滴特效-6ren

JavaScript canvas实现雨滴特效

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

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

这篇CFSDN的博客文章JavaScript canvas实现雨滴特效由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了canvas实现雨滴特效的具体代码，供大家参考，具体内容如下。

1、雨滴特效需求。

雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失，雨滴特效随窗口变化自适应。

2、雨滴实现思路。

1. 用面向对象的思维首先创建canvas画布，绘制一个雨滴的初始化形状 2. 在给雨滴添加运动的方法 3. 通过定时器让雨滴运动起来。

3、具体分析。

1.雨滴初始化需要的属性有哪些？坐标x，y 宽高w，h 。 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性，也就是y轴坐标不断加上加速度的值 3.雨滴下落到底部某一个区域后开始呈现波纹逐渐散开，也就是到达底部某个范围内开始画圆，圆逐渐变大并且变淡加上透明度 4.雨滴下落拖尾效果需要绘制一层阴影覆盖之前运动的雨滴。

4、代码。

 
    ? 
   
         <!DOCTYPE html> 
        
         < 
         html 
         lang 
         = 
         "en" 
         > 
        
         < 
         head 
         > 
        
         < 
         meta 
         charset 
         = 
         "UTF-8" 
         > 
        
         < 
         meta 
         name 
         = 
         "viewport" 
         content 
         = 
         "width=device-width, initial-scale=1.0" 
         > 
        
         < 
         title 
         >canvas</ 
         title 
         > 
        
         < 
         style 
         > 
        
         * { 
        
         margin: 0; 
        
         padding: 0; 
        
         } 
        
         canvas { 
        
         vertical-align: middle; 
        
         background: #000; 
        
         } 
        
         </ 
         style 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         canvas 
         id 
         = 
         "myCanvas" 
         ></ 
         canvas 
         > 
        
         < 
         script 
         > 
        
         // 创建画布 
        
         let myCanvas = document.getElementById('myCanvas') 
        
         let ctx = myCanvas.getContext('2d') 
        
         // 自适应窗口 
        
         let width = myCanvas.width = window.innerWidth 
        
         let height = myCanvas.height = window.innerHeight 
        
         window.addEventListener('resize', () => { 
        
         width = myCanvas.width = window.innerWidth 
        
         height = myCanvas.height = window.innerHeight 
        
         }) 
        
         // 绘制雨滴 
        
         let raindropArr = [] 
        
         function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) { 
        
         this.x = rand(0, window.innerWidth) // 雨滴的x轴 
        
         this.y = y || 0 // 雨滴的y轴 
        
         this.dy = rand(2, 4) // 雨滴的加速度 
        
         this.w = w || 2 // 雨滴的宽度 
        
         this.h = h || 10 // 雨滴的高度 
        
         this.l = rand(0.8 * height, 0.9 * height) // 雨滴的下落高度 
        
         this.r = r || 1 // 波纹半径 
        
         this.dr = dr || 1 // 波纹增加半径 
        
         this.maxR = maxR || 50 // 波纹最大半径 
        
         this.a = a || 1 // 波纹透明度 
        
         this.va = 0.96 // 波纹透明度系数 
        
         } 
        
         Raindrop.prototype = { 
        
         draw: function (index) { // 绘制雨滴 
        
         if (this.y > this.l) { 
        
         ctx.beginPath() 
        
         ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2) 
        
         ctx.strokeStyle = `rgba(0,191,255,${this.a})` 
        
         ctx.stroke() 
        
         } else { 
        
         ctx.fillStyle = 'skyBlue' 
        
         ctx.fillRect(this.x, this.y, this.w, this.h) 
        
         } 
        
         this.update(index) 
        
         }, 
        
         update: function (index) { // 更新雨滴坐标 运动起来 
        
         if (this.y > this.l) { 
        
         if (this.a > 0.03) { 
        
         this.r += this.dr 
        
         if (this.r > this.maxR) { 
        
         this.a *= this.va 
        
         } 
        
         } else { 
        
         this.a = 0 
        
         raindropArr.splice(index, 1) 
        
         } 
        
         } else { 
        
         this.y += this.dy 
        
         } 
        
         } 
        
         } 
        
         function rand(min, max) { 
        
         return Math.random() * (max - min) + min 
        
         } 
        
         setInterval(() => { 
        
         let raindrop = new Raindrop() 
        
         raindropArr.push(raindrop) 
        
         }, 100) 
        
         setInterval(() => { 
        
         ctx.fillStyle = 'rgba(0, 0, 0, 0.1)' 
        
         ctx.fillRect(0, 0, myCanvas.width, myCanvas.height) 
        
         for (let i = 0; i <  
         raindropArr.length 
         ; i++) { 
        
         raindropArr[i].draw(i) 
        
         } 
        
         }, 30) 
        
         </script> 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >