svg随即生成园

Html

Css

svg绘制矩形

for (var i = 0; i < 30; i++) {
     var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     c.setAttribute('r', rn(10, 100));
     c.setAttribute('cx', rn(0, 600));
     c.setAttribute('cy', rn(0, 400));
     c.setAttribute('fill', rc(0, 256));
     c.setAttribute('fill-opacity', Math.random());
     c.onclick = function() {
         var that = this;

//必须保证每个圆形只能被点击一次
         that.onclick = null; //点击一次取消监听函数

var timer = setInterval(function() {
             ///当前元素变大
             var r = that.getAttribute('r');
             r *= 1.1;
             that.setAttribute('r', r);
             ///当前元素变淡
             var o = that.getAttribute('fill-opacity');
             o *= 0.9;
             that.setAttribute('fill-opacity', o);
             if (o <= 0.001) {
                 s11.removeChild(that); //DOM上删除元素
                 clearInterval(timer); //清除定时器
             }
         }, 40)
     }
     s11.appendChild(c);
 }

//random number：返回指定范围内的随机整数
 function rn(min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 }
 //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})`;
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

svg随即生成园



代码描述：svg随即生成圆

必须保证每个圆形只能被点击一次

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

wangshulan

相关代码

svg绘制矩形

svg随即生成园

最新