<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            text-align: center;

        }

        svg{

            background: #ddd;

        }

    </style>

</head>

<body>

<h1>svg绘制多个圆形</h1>

<!--<svg width="500" height="400" id="s3" cx="0" cy="20" fill="#aaa"></svg>-->

<svg width="500" height="400" id="s3"></svg>

<script>

    for(var i= 0;i<30;i++){

        var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

        c.setAttribute('r', rn(20,100));//随机半径

        c.setAttribute('cx', rn(0,500));//随机圆心 X坐标

        c.setAttribute('cy', rn(0,400));//随机圆心 Y坐标

        c.setAttribute('fill', rc(0,255));//填充色

        c.setAttribute('fill-opacity', Math.random()); //填充透明度

        s3.appendChild(c);

        c.onclick = function(){

            var that = this;//保留this

            that.onclick = null;//放置点击两次,取消事件监听

            //标准小技巧：当前圆不能被再次点击两次

            var timer = setInterval(function(){

                   var r = that.getAttribute("r");

                   r*=1.05;//增长5%

                   that.setAttribute("r",r);

                   var p = that.getAttribute("fill-opacity");

                   p *=0.9;//减少10%

                that.setAttribute("fill-opacity",p);

                if(p<0.001){

                    clearInterval(timer);

                    timer=null;

                    s3.removeChild(that);//删除当前元素

                }

            },50)

        }

    }

    //random number ,返回指定范围的随机数

    function rn(min, max) {

        return Math.floor(Math.random() * (max - min) + min);

    }

    //random color，返回指定范围内的随机颜色：rgb是0~255

    function rc(min, max) {

        var r = rn(min, max);

        var g = rn(min, max);

        var b = rn(min, max);

        return `rgb(${r}, ${g}, ${b})`;

    }

</script>

</body>

</html>

SVG绘制多个圆的更多相关文章

  1. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  2. SVG绘制太极图

    思路:先画一整个圆,填充颜色为黑色,再用一个边框和填充颜色均为白色的长方形覆盖右半边的半圆,再以同一个圆心,相同半径绘制一整个圆,该圆的边线颜色为黑色,没有填充颜色,最后常规操作再画四个小圆 源代码: ...

  3. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  4. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  5. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  6. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  7. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  8. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  9. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

随机推荐

  1. [2019杭电多校第三场][hdu6608]Fansblog

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6608 大致题意是比p小的最大素数q,求q!%p的值. 由威尔逊定理开始推: $(p-1)!\equiv ...

  2. SCUT - 274 - CC B-Tree - 树形dp

    https://scut.online/p/274 首先要判断是一颗树,并且找出树的直径. 是一棵树,首先边恰好有n-1条,其次要连通,这两个条件已经充分了,当然判环可以加速. 两次dfs找出直径,一 ...

  3. LED音乐频谱之点阵

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/37967455 一.硬件 watermark/2/text/aHR0cDovL2 ...

  4. NGUI的怎么在一个Gameobject(游戏物体)中调用另一个Gameobject(游戏物体)的脚本（C#）

    一,在C#代码中,我们都知道可以给游戏物体添加一个脚本,如下图 二,在当前我们是可以调用到该游戏物体脚本定义的变量,但是我们要在其他脚本调用怎么办?如下代码, KnapSackItem kn = it ...

  5. VISTA Enhancer Browser

    微信公众号:生物信息学起步如果觉得对你有帮助,欢迎关注/转发/分享[1] 内容目录 1.目的2.实验数据2.1 候选增强子识别2.2 转基因小鼠分析2.3 注释3.搜索数据库3.1 概括3.2 高级搜 ...

  6. 【推荐系统】知乎live入门

    参考链接: 知乎推荐系统live:姚凯飞推荐系统live 目录 1.推荐概览与框架 2.细节补充 3.召回 4.排序 5.常用技能与日常工作 5.用户画像-特征工程 6.相关经验 7.推荐考试拿分路径 ...

  7. etc/pass命令列表

    用户 密码 用户UID 用户组GID 备注 home目录位置 默认shell root x 0 0 root /root /bin/bash daemon x 1 1 daemon /usr/sbin ...

  8. [USACO]奶牛会展（背包）

    [USACO]奶牛会展 题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览. ...

  9. 了解卷积神经网络如何使用TDA学习

    在我之前的文章中,我讨论了如何对卷积神经网络(CNN)学习的权重进行拓扑数据分析,以便深入了解正在学习的内容以及如何学习它. 这项工作的重要性可归纳如下: 它使我们能够了解神经网络如何执行分类任务. ...

  10. LocalDateTime用法（jdk1.8 ）

    前言 最近看别人项目源码,发现Java8新的日期时间API很方便强大,所以转载该入门介绍博客,记录一下. 使用新时间日期API的必要性 在java8以前,或许: 当你在做有关时间日期的操作时,你会想到 ...