VML、SVG、Canvas简介

1、VML:

       VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持。

2、SVG:
       可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。
       由于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,对SVG支持最好的浏览器是Opera。

3、Canvas:

       Canvas元素是HTML5的一部分,允许脚本动态渲染位图像。最初由苹果公司内部使用,后来才有人组建议为下一代的网络技术使用该元素。
浏览器支持方面:Firefox,Chrome,Safari和Opera9都支持canvas tag,canvas用来绘制2D图形,IE9支持canvas。

发布了221 篇原创文章 · 获赞 368 · 访问量 171万+
展开阅读全文

vml手绘闭合多边形,想转成SVG或者canvas的。

12-08

最近要实现一个功能,在一张图片上选好区域后,然后记录后选择的坐标。然后使用 map area 将所选区域显示出来。 我在网上找了一段vml的代码,能实现我的功能。 但是因为vml只支持ie,所以没有办法在 Chrome上用。 这个看了两天了,一直没有实现方法,请各位大神帮帮忙,能将代码改成 SVG或者canvas这种能支持Chrome浏览器的。 下面的代码是vml手绘闭合多边形的。 再次谢谢各位大神了。 <HTML xmlns:v> <head> <title>手绘多边形</title> <meta name="ContentType" content="text/html" /> <meta name="CharSet" content="UTF-8" /> <style type="text/css"> v\:* {behavior:url(#default#VML);} </style> <script language="javascript"> var Working=false;//判断是否画图的状态 var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成铅笔、记忆点等连续线段 var xx,yy; //鼠标单击事件 function divMousedown() { if(!Working)//第一次点击鼠标 { xx=event.x; yy=event.y; poly1=div1.appendChild(document.createElement("<v:shape path='m0,0 l0,0' filled='true' style='POSITION:absolute;z-index:1;left:"+xx+";top:"+yy+";width:100;height:100;filter: Alpha(Opacity=60);' strokecolor='black' strokeweight='1' coordsize='100,100' fillcolor='yellow'/>")); oldvalue=poly1.path.value.replace("e",""); oldx=xx; oldy=yy; Working=true; } else { if (poly1!=null) oldvalue=poly1.path.value.replace(" e",""); } } //鼠标移动的时候 function divMouseMove() { tempx=event.x; tempy=event.y; if (poly1!=null) { poly1.path.value=oldvalue+","+(tempx-oldx)+","+(tempy-oldy); poly1.path.value=poly1.path.value.replace(",0,0,",",0,").replace(",0 e","e"); } } function divMouseUp() { if(event.button==2) { poly1.path.value=oldvalue+"x e"; Working=false; poly1=null; } } </script> <body style="margin:0px;"> <div id="div1" style="position:absolute; height:100%; width:100%; border:1px solid 0000FF;" onmousedown="divMousedown();" onmousemove="divMouseMove();" onmouseup="divMouseUp();" oncontextmenu="return false;">在页面上点击鼠标左键开始,右击鼠标右键结束</div> </body> </html> 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览