如何用svg实现水波动画（点击出现随机圆，移开消失）-优快云博客

本文链接：https://blog.youkuaiyun.com/Yannnnnm/article/details/109003295

本文介绍了如何使用SVG在网页上实现一个交互功能：用户点击画布时，随机位置出现一个随机大小和颜色的圆，松开鼠标后圆圈逐渐扩大并变淡直至消失。通过JavaScript事件监听和SVG元素操作，动态效果得以实现，代码简洁易懂，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章用于实现如何用svg实现在相应画布上随意点击出现一个随机大小随机颜色的圆，松开手，圆慢慢变大，变淡消失（这里不考虑兼容性）

需求实现

创建画布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            background-color: rgba(0, 0, 0, 0.1);
            display: block;
            margin: auto;//居中
        }
    </style>
</head>

<body>
    <svg width="800" height='800'>
    </svg>

</body>

</html>

准备阶段

生成在最大最小值的随机数
获得svg元素

		 var oSvg = document.querySelector('svg');

        function ran(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

绑定事件

按下鼠标事件：我们按下鼠标的时候，生成随机大小随机颜色，随机透明度的圆，并且考虑到我们放下鼠标消失，下一次还会点击，所以我们这里要考虑到下一次点击时圆是否消失的情况

  var chilrenA = oSvg.children;//控制页面上没有圆的时候才能生成圆
        oSvg.onmousedown = function(e) {
            if (chilrenA.length == 0) { //控制页面上没有圆的时候才能生成圆
                var x = e.offsetX;
                var y = e.offsetY;
                //创建一个圆
                var cir = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
               //圆的半径在20-100之间
                cir.setAttribute('r', ran(20, 100));
                //坐标
                cir.setAttribute('cx', x - cir.getAttribute('r') / 2);
                cir.setAttribute('cy', y - cir.getAttribute('r') / 2);
                //圆的颜色和透明度
                cir.setAttribute('fill', `rgb(${ ran(0, 255)},${ ran(0, 255)},${ ran(0, 255)})`);
                cir.setAttribute('fill-opacity', (ran(3, 10) / 10).toFixed(1));
				//追加
                oSvg.append(cir);
            }
        }

鼠标抬起事件
鼠标抬起，圆的半径变大，透明度变小，慢慢消失，当小到一定程度删除这个圆，让下一个可以点

  oSvg.onmouseup = function() {
            if (chilrenA.length == 1) {
                var chilren = oSvg.children[0];

                //   变大 变淡
                var timer = setInterval(function() {
                    var r = +chilren.getAttribute('r'); //获取的是一个字符串，用加强转
                    var opc = +chilren.getAttribute('fill-opacity'); //获取的是一个字符串，用加强转
                    r *= 1.2; //每一次放大1.2倍
                    opc *= 0.8; //每一次颜色变淡为原来的0.8
                    //重新设置半径和透明度
                    chilren.setAttribute('r', r);
                    chilren.setAttribute('fill-opacity', opc);
                    if (opc < 0.04) {
                        // 当透明度小于0.04清除定时器。删除这个元素
                        clearInterval(timer)
                        chilren.remove()
                    }

                }, 30)


            }
        }

到这里基本结束，大家有自己喜欢的颜色或者大小可以自己设置,下面是随便点击截的几张图，下面有完整代码，大家可以自己尝试一下！！！
在这里插入图片描述

完整版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            background-color: rgba(0, 0, 0, 0.1);
             display: block;
            margin: auto;//居中
        }
    </style>
</head>

<body>
    
    <svg width="800" height='800'>
        <!-- <circle cx='10' cy='10' r='10' fill='rgb(2,23,23)'  fill-opacity='0.3'></circle> -->
    </svg>
    <script>
        var oSvg = document.querySelector('svg');

        function ran(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        var chilrenA = oSvg.children; //控制页面上没有圆的时候才能生成圆
        oSvg.onmousedown = function(e) {
            if (chilrenA.length == 0) { //控制页面上没有圆的时候才能生成圆
                var x = e.offsetX;
                var y = e.offsetY;
                //创建一个圆
                var cir = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                //圆的半径在20-100之间
                cir.setAttribute('r', ran(20, 100));
                //坐标
                cir.setAttribute('cx', x - cir.getAttribute('r') / 2);
                cir.setAttribute('cy', y - cir.getAttribute('r') / 2);
                //圆的颜色和透明度
                cir.setAttribute('fill', `rgb(${ ran(0, 255)},${ ran(0, 255)},${ ran(0, 255)})`);
                cir.setAttribute('fill-opacity', (ran(3, 10) / 10).toFixed(1));

                oSvg.append(cir);
            }
        }

        oSvg.onmouseup = function() {
            if (chilrenA.length == 1) {
                var chilren = oSvg.children[0];

                //   变大 变淡
                var timer = setInterval(function() {
                    var r = +chilren.getAttribute('r'); //获取的是一个字符串，用加强转
                    var opc = +chilren.getAttribute('fill-opacity'); //获取的是一个字符串，用加强转
                    r *= 1.2; //每一次放大1.2倍
                    opc *= 0.8; //每一次颜色变淡为原来的0.8
                    //重新设置半径和透明度
                    chilren.setAttribute('r', r);
                    chilren.setAttribute('fill-opacity', opc);
                    if (opc < 0.04) {
                        // 当透明度小于0.04清除定时器。删除这个元素
                        clearInterval(timer)
                        chilren.remove()
                    }

                }, 30)


            }
        }
    </script>
</body>

</html>