SVG绘图(二)--渲染满天星辰_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了SVG绘图(二)--渲染满天星辰_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5464字,纯文字阅读大概需要8分钟。
内容图文
![SVG绘图(二)--渲染满天星辰_html/css_WEB-ITnose](/upload/InfoBanner/zyjiaocheng/402/b2ff71726aa84a7387de50178979410f.jpg)
在网页中嵌入动画,过去比较流行采用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画布
在这里,我们将一颗星星画出来,用多边形创建,路径为points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2"。我们打算通过use属性,将这个星星元素复制好多好多份并置入
在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)
内容总结
以上是互联网集市为您收集整理的SVG绘图(二)--渲染满天星辰_html/css_WEB-ITnose全部内容,希望文章能够帮你解决SVG绘图(二)--渲染满天星辰_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。