在web上画图_H5之家 - 中国HTML5教程资源分享第一站

在web上画图

10 十二, 2014 在 DIV+CSS / UI tagged canvas / html / svg / UI / 图像 by wei

背景

项目是一个电信项目，在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" ""> <svg width="100%" height="100%" version="1.1" xmlns=""> <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="" /> 使用<object>标签 <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="" /> 使用<iframe>标签 <iframe src="rect.svg" width="300" height="100"> </iframe>

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

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

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

使用canvas画图：

待续……

关于 wei

我是一个要成为大牛的人！

参看所有文章 wei →