Raphael JS庫是在webrebuild交流會上聽專家將到的,後來就看了下,果然很強大——通過SVG/VML+JS實現跨浏覽器的矢量圖形實現方案。
這其實和cufon等網絡字體的實現原理是有些類似的:非IE浏覽器使用SVG繪圖,然後IE中使用VML。它的目的是想要提供一種簡單易用的真正跨浏覽器的矢量圖形實現方案,包括一些動畫效果。
Raphael的語法也很簡單,基本上了解SVG就會很容易上手的:
var c = paper.path("M10 10L90 90"); // 畫一條線;
IE6+、Firefox 3.0+、chrome、opera等都是很好支持的。
一些酷酷的例子:
使用Raphael繪制的117個矢量圖標:
嗯,這些圖標都是用Raphael實現的,點擊例子頁面中的圖標下面就會顯示代碼。
簡單的動畫效果,雖然也可以用JS+CSS3實現,但是這個可是跨浏覽器的哦。。。
感興趣的同學可訪問官方網站查看更多demo,以及參考文檔