html 矢量图片在一个图片上 但是能分开用

比如一张图片（img.jpg）包含很多按钮（icon），其中一个icon大小是10px*10px，那么你弄个div，也设置10px*10px的大小，然后背景图片为这张img.jpg，最后用一下图片的background-position定位。

例：<div style="widthL10pxheight:10pxbackground-image:img.jpgbackground-position:5px 5px"></div>

注：background-position不是css3才出来的，在css1的时候就有了。

AI是一种矢量图形的格式，而HTML是超文本标记语言，在HTML中实现矢量图有四种可能性：1.使用flash，将你的ai转成flash。然后在网页中引用flash.2.使用silverligth,将你的ai转成相应用silverlight，然后引用。3.使用SVG，将你的ai直接写成SVG图片，这个可以在图形处理软件中存为svg就可以了！但对于浏览器的支持多少，不太好说。最后就是直接再用SVG写一遍。4.使用VML,该种方法只存在于 IE浏览器中，使用VML将你的ai重写一遍。当然，如果你不在乎图形的损失，可以将其转入图象，也就是转成位图形式，在位图下，你生成图片让浏览器进行引用就可以了！至于使用jpg还是gif还是bmp，你随意！否则就要根据图象使用色彩数量，图片大小等各种因素考虑，将图片在尽可能损失较小的情况下，生成占用空间最小的图片！

HTML5 <canvas>标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形。

*** 作可以说是相当复杂。建议你可以用HYPE3实验下，如果你想做HTML5动画的话。

如果你只是想研究，请看：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

---