SVG绘制圆形的运用

越陌度阡

发布于 2020-11-26 15:00:41

1.1K0

发布于 2020-11-26 15:00:41

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

运用SVG绘图写一个动画特效。

动画效果如下：

实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>SVG绘图——圆形</title>
    <style>
        body {
            text-align: center;
        }
        svg {
            background: #ddd;
        }
    </style>
</head>

<body>
    <h1>SVG绘图——圆形</h1>
    <svg id="s9" width="500" height="400"></svg>
    <script>
        // random number：返回指定范围内的随机整数
        function rn(min, max) {
            var n = Math.floor(Math.random() * (max - min) + min);
            return n;
        };
        // random color: 返回指定范围内的随机颜色
        function rc(min, max) {
            var r = rn(min, max);
            var g = rn(min, max);
            var b = rn(min, max);
            return `rgb(${r},${g},${b})`;
        };
        for (var i = 0; i < 30; i++) {
            var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            c.setAttribute('r', rn(10, 80));
            c.setAttribute('cx', rn(0, 500));
            c.setAttribute('cy', rn(0, 400));
            c.setAttribute('fill', rc(0, 255));
            c.setAttribute('fill-opacity', Math.random());
            c.onclick = function () {
                // this对象在程序中随时会改变，而var that=this之后，that没改
                // 变之前仍然是指向当时的this，这样就不会出现找不到原来的对象
                var that = this;
                // 为防止当前圆形再次被点击，应取消其事件监听
                that.onclick = null;
                // 启用定时器
                var t = setInterval(function () {
                    // 获得半径
                    var r = that.getAttribute('r');
                    // 半径递增
                    r *= 1.05;
                    // 设置半径
                    that.setAttribute('r', r);
                    // 获得透明度
                    var p = that.getAttribute('fill-opacity');
                    // 透明度递减
                    p *= 0.9;
                    // 设置透明度
                    that.setAttribute('fill-opacity', p);
                    // 圆形几乎已经看不见了
                    if (p < 0.0001) {
                        // 清除定时器
                        clearInterval(t);
                        // 删除圆形
                        s9.removeChild(that);
                    }

                }, 30);
            };
            s9.appendChild(c);
        }
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/06/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

svg