2013-08-22 69 views
0

這是更快(複雜的圖紙)。 fillRect或重新打印一個PNG圖像drawImage。當重新打印10000個對象時。畫布純繪製vs PNG圖像

ctx.fillStyle="#FF0000";//RED COLOR 
ctx.fillRect(0,0,50,50); 

VS

ctx.drawImage(img,10,10); 

回答

0

drawImage實際上要快。

我曾與一個50×50 PNG更新測試用例:http://jsperf.com/canvas-draw-methods

在Firefox中,這只是稍快,但在Chrome的差別是巨大的,與drawImage由一個數量級快。

(注測試的一個版本是,因爲我用的是PNG是不是正確的大小似地傾斜。圖像尺寸,使一個很大的區別。)

+0

哇,高達90%的速度。謝謝 – J261

+0

這是一個糟糕的可怕測試案例。您正在比較使用432 * 505圖片繪製50 * 50的正方形。當然,小一點會更快。這是一個更新:http://jsperf.com/canvas-draw-methods/2(結果是一樣的,但差異較低,更像是40%) – david

+0

然後可能會錯過fillRect的優勢,如果你必須畫有些複雜。 – J261