【重點突破】——SVG技術動態隨機繪制圓形

阿新 • • 發佈：2017-10-03

str align oct cnblogs 字符啟用分享 back 範圍

一、引言

在學習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技術動態隨機繪制圓形

str align oct cnblogs 字符啟用分享 back 範圍一、引言在學習Canvas繪圖技術時，做的是隨機驗證碼的例子，在學習SVG繪圖技術時，同樣也有一個隨機繪制的例子——動態隨機繪制圓形。這個練習，即綜合了多種SVG技術的知識點，又很具有藝術感，隨

【重點突破】——SVG技術動態隨機繪制圓形

【重點突破】——SVG技術動態隨機繪制圓形

【重點突破】——two.js模擬繪制太陽月亮地球轉動

【重點突破】——Drag&Drop拖動與釋放

【重點突破】——使用Express創建一個web服務器

【重點突破】——如何快速識別並解決“閉包問題”？

【重點突破】——第三方繪圖工具FusionCharts.js的使用詳解

【重點突破】—— 各種真·假Loading效果的實現

【重點突破】—— Vue2.0 transition 動畫Demo實踐填坑

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑（二）【重點突破】—— 當better-scroll 遇見Vue

【重點突破】—— Easy Mock的使用及Mock.js規範

【重點突破】—— Echarts圖表的介紹和使用

【重點突破】—— Nodejs+Express+MongoDB的使用基礎

25、【opencv入門】輪廓查找與繪制（3）——凸包

26、【opencv入門】輪廓查找與繪制（4）——正外接矩形

【超越CycleGAN】這個人體動態遷移技術讓白痴變舞王（視訊）

【研發管理】從技術到管理，思維轉變是關鍵

【編程珠璣】【第一章】生成隨機數、隨機取樣的問題

【演算法學習】基於“平均”的隨機分配演算法（貪婪，回溯），以按平均工作量隨機分配單位為例

【備忘】關於tp動態註冊路由的挖坑採坑經驗

【機器學習】決策樹與隨機森林（轉）

【重點突破】——SVG技術動態隨機繪制圓形

相關推薦