SVG绘图(二) —— 渲染满天星辰

标签：

         看到一些炫酷的动画，总有种好想实现它，但是又无奈于腹中的代码量略少，只好不明觉厉，圆圆的大眼睛里满是对新事物的渴求。

      在网页中嵌入动画，过去比较流行采用Falsh、Java Applet和微软的SilverLight，但他们的网页安全性、兼容性、难操作性以及文件的大小等缺陷让很多Web开发者又爱又恨。Gif依旧是个不错的选择，但遗憾的是并不能用DOM操控其中的元素。自从有了SVG、HTML5和CSS3，一些简单的平面动画的实现变得方便和简单，虽然他们在一些方面譬如兼容性和可操作性等依然未能完全尽人意，但是足以让Web开发者兴奋不已，于是“优雅降级”和“渐进增强”等思想大行其道。在Web绘图方面比较NB的还有WebGL，它可以在页面中渲染出炫酷的三维动画图，但其原生的接口学习曲线较陡，而且WebGL开发人员需要一定的图形学基础，入门门槛较高，于是，一些封装了WebGL原生接口的框架层出不穷，其中最有名的应该要数three.js。本文准备以SVG和JavaScript做一个比较炫酷的DEMO，让浏览器自动渲染出满天星辰。（不要问我IE8及其以下的浏览器啥都木有加载出来，这是因为SVG只能兼容IE9以上和其他主流浏览器。然而这并不能阻挡SVG的魅力~）

<svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRation="xMinYMid slice">
<!-- 绘制星星原型 -->
<defs>
<polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
</defs>
<!-- 装载满天星辰 -->
<g id="star-group"></g>
</svg>

html, body {margin: 0; padding: 0; width: 100%; height: 100%; background: #012; font-size: 0; line-height: 0;}

window.onload=function () {
// 页面加载完毕后，执行满天星辰的渲染
rederStar();
}
// SVG元素的命名空间
var svgNS = "http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";
// 将use属性封装成函数，以便调用
function use(origin) {
var _use = document.createElementNS(svgNS, "use");
_use.setAttributeNS(XLINK_NS, "xlink:href", "#" + origin.id);
return _use;
}
// 创建任意两个数之间的随机数
function random(min, max) {
return min + (max - min) * Math.random();
}
// 绘制满天星星
function rederStar() {
// 获取星星原型和装载满天星星的容器star-group
var starRef = document.getElementById("star");
var starGroup = document.getElementById("star-group");
// 星星的总数量
var starCount = 500;
// 循环，画出 starCount 个星星
for(var i = 1; i < starCount; i++) {
// star引用starRef原型
var star;
star = use(starRef);
// 让星星的透明度、位置和大小随机变化
star.setAttribute("opacity", random(0.1, 0.4));
star.setAttribute("transform", "translate(" + random(-1000, 1000) + "," + random(-400, 400) + ") " + "scale(" + random(0.1, 0.6) + ")");
// 将绘制好星星置入starGroup的DOM子元素中
starGroup.appendChild(star);
}
}

Here is the Demo.(2KB)

        本来想自己用AI画点什么的，奈何我的AI抽风，所以就拿了不知哪位大牛的SVG裸图来用一下。修改一下源码，增加了一些迎风吹拂的动画效果。

SVG

See the Pen <a href="http://codepen.io/dengzhirong/pen/YXVVEV/" data-ke-src="http://codepen.io/dengzhirong/pen/YXVVEV/">YXVVEV</a> by dengzhirong (<a href="http://codepen.io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong">@dengzhirong</a>) on <a href="http://codepen.io" data-ke-src="http://codepen.io">CodePen</a>.

Here is the Demo.(7KB)

SVG绘图(二) —— 渲染满天星辰

标签：

原文地址：http://www.cnblogs.com/polygon/p/4576229.html