一、引言

在学习Canvas绘图技术时，做的是随机验证码的例子，在学习SVG绘图技术时，同样也有一个随机绘制的例子——动态随机绘制圆形。这个练习，即综合了多种SVG技术的知识点，又很具有艺术感，随机生成的任意一张图片都具有艺术之美。

二、要求

在SVG画布上随机的绘制30个实心圆形，大小随机、位置随机、填充颜色随机、透明度随机；点击某个圆形后，它慢慢变大/淡，直至从DOM树上删除。

三、实现

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            text-align: center;

        }

        svg{

            background:#ddd;

        }

    </style>

</head>

<body>

   <h1>动态随机绘制SVG圆形</h1>

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

   <script>

       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(0, 1));

           //坑：在定时器启动时，所有圆形都已经绘制好，所以此处c会指向最后一个创建好的圆

           c.onclick = function(){

               var that = this;//留存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);

                      that.parentNode.removeChild(that);

                   }

               },30);

           }

           s9.appendChild(c);

       }

       //random number：返回指定范围内的随机整数

       function rn(min,max){

           var n = Math.floor(Math.random()*(max-min)+min);

           return n;

       }

       //random color：返回指定范围内的随机颜色

       //形如：rgb(x,x,x)

       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. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

  2. UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

    本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG ( ...

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

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

  4. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  5. SVG的动态之美-搜狗地铁图重构散记

    搜狗地图发布了新版的移动端地铁图,改版初衷是为了用户交互体验的提升以及性能的改善.原版地铁图被用户吐槽最多的是pinch缩放不流畅.无过渡动画.拖拽边界不合理等等,大体上都是交互体验上的问题.实际上原 ...

  6. php实现动态随机验证码机制（CAPTCHA）

    php实现动态随机验证码机制 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Ap ...

  7. Java程序员需要突破的技术要点

    一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...

  8. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  9. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

随机推荐

  1. sqlserver中top 1 赋值的问题

    看代码 declare @iid intselect @iid=111select top 1 @iid=isnull(IID,0) from YYGL_PCDMX where IID=0print ...

  2. String类型的XML文件的格式化

    在接收到的xml报文中,未经过格式化,不好看 package org.zln.xml.format; import org.dom4j.Document; import org.dom4j.Docum ...

  3. 【bzoj1803】Spoj1487 Query on a tree III DFS序+主席树

    题目描述 You are given a node-labeled rooted tree with n nodes. Define the query (x, k): Find the node w ...

  4. Pointcut is not well-formed: expecting 'identifier' at character position 0 ^ || Pointcut is not well-formed: expecting '）' at character position 11 ^

    错误提示: 解决方法1:指定execution 在执行目标方法之前指定execution 解决方法2:可能是execution写错了.请仔细检查. 其他——execution参数设置(带问好的可以不配 ...

  5. 经典SQL语句大全、50个常用的sql语句

    50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...

  6. cf 853 D Michael and Charging Stations [dp]

    题面: 传送门 思路: 看到题目,第一思路是贪心,但是我很快就否决掉了(其实分类贪心也可以做) 然后就想,贪心不能解决的状态缺失,是否可以用dp来解决呢? 事实证明是可以的 我们设dp[i][j]表示 ...

  7. 论文笔记《Fully Convolutional Networks for Semantic Segmentation》

    一.Abstract 提出了一种end-to-end的做semantic segmentation的方法,也就是FCN,是我个人觉得非常厉害的一个方法. 二.亮点 1.提出了全卷积网络的概念,将Ale ...

  8. [JSOI2007]建筑抢修 (贪心)

    题目链接 Solution 可以考虑 \(dp\) ,但是很显然 \((n^2)\) 降不下来. 然后考虑贪心,首先,绝对的正确的是,在同等的情况下,给后面的留更多的时间. 首先按照 \(T_2\) ...

  9. Java EE 学习（9）：IDEA + maven + spring 搭建 web（5）- 博客文章管理

    转载:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) . 注:在阅读本文前,请先阅读: Java EE 学习(5):IDEA + maven + spring 搭建 web(1) Jav ...

  10. Long.ValueOf("String") Long.parseLong("String") 区别 看JAVA包装类的封箱与拆箱

    IP地址类型转换原理: 将一个点分十进制IP地址字符串转换成32位数字表示的IP地址(网络字节顺序). 将一个32位数字表示的IP地址转换成点分十进制IP地址字符串. 1.Long.ParseLong ...