JS页面动态绘图工具SVG，Canvas，VML介简介

　 短视频，自媒体，达人种草一站处事

这篇文章首要先容了JS页面动态画图器材SVG，Canvas，VML介简介,文中通过示例代码先容的很是具体，对各人的进修可能事变具有必然的参考进修代价,必要的伴侣可以参考下

说到画图、报表之类的技能，各人起首想到的就是Flex，虽然也有很多相识javaapplet，对付这两种技能来说，各有利弊。

起首Flex很粗笨，可是其结果其实让人喜好。对付javaapplet来说，至少我在收集上很少看到，虽然对付我们做开拓的来说在我们的开拓器材可能内部收集上照旧有一些的。

着实此刻Web长举办画图的话照旧有许多选择的，你可以到谷歌上搜刮JS画图，会有许多画图器材提供应你行使，并且成果很是强盛。好比说maxGraph，你可以到上去看一下结果。

假如你已经在收集上看了一会了我们可以继承来聊一下Web中JS画图的内容。

器材插件满天飞，你也可以看到对付JS画图的支持来说，JQuery和EXT都没有放松，出格是基于JQuery的插件不尽其数。

然则我要说的不是这些器材插件，我首要想说一下赏识器对付画图的支持方面。大概你会发明，某些画图插件并不能支持全部赏识器，这是怎么回事呢？

对付JS图形方面的支持，首要存眷三个词：SVG，VML，CANVAS。

对付SVG

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标志说话（XML），用于描写二维矢量图形的一种图形名目。SVG由W3C拟定，是一个开放尺度。2008年12月22日，SVG Tiny 1.2成为W3C的保举尺度，W3C今朝正在研究拟定SVG 1.2版本。

因为SVG文件可嵌入JavaScript（严酷地说，应该是ECMAScript）脚原来节制SVG工具，以是在举办Web中JS画图时算是思量的一种。

可是，SVG照旧面对一些题目的。SVG面对的首要题目一个是怎样和已经占据重要市场份额的矢量图形名目Adobe Flash竞争的题目，另一个题目就是SVG的当地运行情形下的厂家支持水平。

赏识器支持环境：

对付赏识器支持方面，Mozilla Firefox自版本1.5刊行后，即开始增援SVG名目标表现，Opera 8.0 版开始增援表现Tiny 1.1规格的SVG，Google Chrome和Safari支持SVG表现，Microsoft的Internet Explorer 8.0版之前尚未增援SVG，直至由Internet Explorer 9.0版开始增援SVG。也就是说，市场占据率最大的IE到今朝为止才方才开始支持，就是说平凡人行使的IE赏识器是不能行使的，并且对付支持水平来说，对SVG支持最好的赏识器是Opera，它支持大大都的SVG特征，其他赏识器不能支持一些属性。莫非我们给客户说你必需安装Opera赏识器？

来看一个SVG的画图结果：

对付Canvas

Canvas元素是HTML5的一部门，应承剧本动态渲染位图像。最初由苹果公司内部行使，其后才有人组提议为下一代的收集技能行使该元素。

对付该元素，起首来说的就是赏识器支持方面。Firefox，Safari和Opera9都支持canvas tag，canvas用来绘制2D图形。可是IE不支持canvas。Google就开拓了excanvas，模仿canvas在其他赏识器的状态。

excanvas今朝版本为excanvas_r3，尚有很多Bug，其它在IE上行使服从绝对是个题目，由于excanvas着实是行使IE中VML来实现canvas结果的。

看一下Demo中画图结果：

对付VML

VML的全称是Vector Markup Language(矢量可标志说话)，矢量的图形，意味着图形可以恣意放大缩小而不丧失图形的质量，这在建造舆图上有很大用途。可是VML只是被IE支持。

来看一个VML的画图结果：

以上就是本文的所有内容，但愿对各人的进修有所辅佐，也但愿各人多多支持剧本之家。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!