Heim  >  Artikel  >  Web-Frontend  >  SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose

SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:481419Durchsuche

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

      在网页中嵌入动画,过去比较流行采用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画布
<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>
         在这里,我们将一颗星星画出来,用多边形创建,路径为points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2"。我们打算通过use属性,将这个星星元素复制好多好多份并置入中,这个可以用JavaScript循环来实现。
         在CSS中,我们首先绘制深邃的蓝色天空,并且希望页面全屏无滚动条。CSS代码如下:
html, body {margin: 0; padding: 0; width: 100%; height: 100%; background: #012; font-size: 0; line-height: 0;}
二. 编写JavaScript代码
直接上代码:
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-groupvar 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);}}
See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/dengzhirong/pen/ZGKKXd/" data-ke-src="http://codepen.io/dengzhirong/pen/ZGKKXd/"&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ZGKKXd&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by dengzhirong (&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong"&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@dengzhirong&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io" data-ke-src="http://codepen.io"&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.
        额,值得注意的是,获得两个数之间的随机数,一般都采用这种方法:min + (max - min) * Math.random()。
        动态创建SVG元素,需要加上命名空间http://www.w3.org/2000/svg;动态创建的SVG元素的xlink链接属性,也需要加上命名空间http://www.w3.org/1999/xlink。

值得完善的地方有:
1. 这里向HTML中插入了500个DOM元素,然而每一次DOM元素的改变都会引起页面加载速度的较大降低,有待优化。可以考虑使用creatDocumentFragment,或者用字符串存储新建的DOM文本,然后再一次性插入HTML中。
2. 星群的绘制范围与SVG的宽高以及viewBox的取值影响较大,耦合度略高。(希望路过的高手能给我一些指点~ )

Here is the Demo.(2KB)


三. 来点好玩的
        只有星星的夜空略单调。我们可以考虑加点文艺的绘画元素上去。

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



Here is the SVG.(5KB)
        额,一般来说,简单的图形可以用SVG代码直接敲出来。但对于一些复杂的SVG路径,建议用AI或者SVG-Edit绘图后另存为svg格式,再抽取其中path节点放入我们所要编辑的SVG文件中,然后再修改其中的填充属性或者增添动画效果什么的。
        在HTML中插入SVG文件。方法有几种,可参考http://www.w3school.com.cn/svg/svg_inhtml.asp。我比较习惯将SVG图片作为背景图片插入。
        最后,再修改一下样式,就大功告成了。
        效果如下:

See the Pen &amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/dengzhirong/pen/YXVVEV/" data-ke-src="http://codepen.io/dengzhirong/pen/YXVVEV/"&amp;amp;amp;amp;amp;amp;gt;YXVVEV&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; by dengzhirong (&amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong"&amp;amp;amp;amp;amp;amp;gt;@dengzhirong&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io" data-ke-src="http://codepen.io"&amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;.

Here is the Demo.(7KB)

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn