在web上画图

背景

项目是一个电信项目,在web界面上,需要展示一个从互联网到客户的拓扑图。
本来想用div+css拼一些图出来,但是显得很不灵活。还是用代码动态生成比较好。需求的变更代码可以及时作出相应。
想来想去,想到了HTML5的canvas这个不会啊,又无意间发现svg格式的图像,这个其实也不会啊。

 

canvas PK svg

canvas和svg,第一认知,就是可以画图。这两种方式,有什么区别呢? 更多区别

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

浏览器兼容性

canvas和svg都对浏览器版本要求较高,IE9+,chrome,Firefox。IE8及以下的东西,那就需要装东西了。

 

先来试一试svg

svg(Scalable Vector Graphics)指可缩放矢量图形;

svg用来定义用于网络的基于矢量的图形;

svg使用xml格式定义图形;

svg图像在放大或改变尺寸的情况下,图形质量不会有损失;

svg是万维网联盟的标准;

svg与诸如dom和xsl之类的w3c标准是一个整体;

 

svg怎么画图?

svg虽然是可以在html上显示,但是不能向html一样,直接用html标签,然后就显示出来。

先来一个svg图像效果

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

这个来自W3School上的一个例子。

从例子中,可以看出有一些标签。svg图像标签有circle,rect,ellipse,line(圆,矩形,椭圆,直线)等,这些标签,就可以直接画出图像。还是比较方便的。将图形拼接起来,就可以实现很牛x的效果了。再做一些渐变,那效果还是不错的。

 

在HTML中使用svg

只做好的svg,要放到html上进行展示。有三种方式

使用<embed>标签

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

使用<object>标签

<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

使用<iframe>标签

<iframe src="rect.svg" width="300" height="100">
</iframe>

上面的使用方式,简单看一下认识就好。

从上面的例子可以看出,使用svg,功能上,满足画图的功能,但是使用上,很不方便。

这时我就发现了另外一个开源项目Rapha?l ,还是比较不错的。这个词不认识怎么念。

 

使用canvas画图:

待续……

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注