2009-09-17 31 views
14

我在互聯網上發現了一個甚至可以與IE6一起使用的矢量庫!哪個更好?爲什麼? RaphaelJS或HTML5畫布?

http://raphaeljs.com/index.html

這是驚人的。

現在我的問題是否比即將推出的HTML5 <canvas>更好?我問的唯一原因是微軟實施<canvas>可能需要幾年的時間,而不需要插件來運行它。

直到互聯網上的所有IE用戶擺脫他們的舊瀏覽器,這樣我們甚至可以證明使用HTML5 <canvas>會更長。

我一直都在堅持標準,但由於MS瀏覽器的開發速度緩慢,這個過程需要很長的時間。

想法?

+0

你不參與項目,是嗎?這聽起來像一個Rah! RAH!帖子,而不是問題。 – 2009-09-17 21:35:35

+0

@ T.J。不,我只是在互聯網上找到它。而且我一直非常沮喪地等待IE瀏覽器趕上所有其他瀏覽器。 – leeand00 2009-09-17 21:37:43

回答

20

Raphael是一個使用SVG完成的矢量圖形庫,而HTML5 canvas是位圖圖形。

如果你想做矢量圖形,我認爲與拉斐爾一起可能是一個不錯的選擇,而不是「正義」畫布。就像你說的那樣,畫布並不適合IE瀏覽器,它可能需要一段時間才能獲得本地支持。如果拉斐爾做你需要的,沒有特別的理由不使用它。

請注意,這裏還有其他一些庫:Excanvas,它使用VML模擬IE瀏覽器的畫布(據我所知),還有一些與Silverlight和Flash相同但我忘記了它們名字的其他庫。

還有一個Dojo,它有一個用於抽象畫布使用的組件,在一個易於使用的界面後面,它也支持IE。

在所有瀏覽器中使用本地畫布不會使庫過時,因爲庫通常將一些畫布複雜性抽象出來,使用起來更容易。

+5

性能是最大的區別。如果有很多節點要繪製,SVG會變慢很多。這是SVG工作原理的一個固有結果。 HTML5畫布的性能主要取決於需要重繪的像素總量(寬x高)。 – Jacco 2011-07-04 09:44:04

+0

@Jacco - 偉大的一點 - 如果你試圖爲很多東西製作動畫(如星球場),事情真的開始與SVG結結巴巴 - 畫布可以更好地處理它。 – 2012-10-09 21:09:44

5

谷歌SVGWeb(http://code.google.com/p/svgweb/)是你想要的。它使IE與標準SVG兼容,並且所有其他主流瀏覽器已經支持該標準。換句話說,正如谷歌所說,「使用庫和本地SVG支持,您可以立即將目標安裝到現有已安裝的Web基礎的95%左右。」

5

而且您可以使用在IE中實現HTML5 Canvas標準的http://code.google.com/p/explorercanvas/。你要做的就是添加:

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
</head> 

Canvas和SVG之間的差異說明如下:

SVG和畫布是不是真的 互換技術。 SVG是 保留模式圖形的類型,其中 所有內容均來自於抽象模型(SVG文檔)的抽象模型 。 畫布另一方面是一種 直接模式圖形,其中 是沒有模型和客戶端 (JavaScript)必須照顧 重繪,動畫等。

4

答案取決於你所需要的:

  • ,如果你需要添加事件處理程序中的圖形對象:您需要使用SVG。其他畫布。

  • ,如果不需要的事件是性能非常重要:如果是,那麼帆布5.

注意,IE 9支持Canvas和提供了更多的HTML 5的支持比其他瀏覽器!

+1

事件可以在HTML5畫布中輕鬆處理。 – Jacco 2011-07-04 09:40:59

+0

畫布本身將響應點擊事件;不過,您需要手動跟蹤對象位置。像[KineticJS](http://www.kineticjs.com/)這樣的圖書館可以幫助解決這個問題,並且使Canvas和Raphael一樣易於使用。 – btown 2012-06-06 19:11:44

0

正在尋找「raphael vs canvas」這裏的帖子是5歲。從那以後有什麼事情要做?拉斐爾obsolet?