畫布drawImage在大型源代碼上很慢

我正在製作一款遊戲並正在創建一款相機以跟隨玩家。我有一個4096x4096px的大畫布（遊戲地圖）。爲此，我願與借鑑，只有其中的一部分：畫布drawImage在大型源代碼上很慢

ctx.drawImage(canvas, 0, 0, 800, 600, 0, 0, 4096, 4096);

每一幀之前，我會打電話：

ctx.clearRect(0, 0, 800, 600);

要只清除相機。我能看到的是，drawImage超級慢，性能明智。我的遊戲地圖是否很大，這不是由drawImage處理的？我如何創建一個流暢的渲染？

來源

2015-09-07 musse1

我想你可能會誤解drawImage的一些論點。

正如你寫的drawImage，它會從源代碼剪下800x600。然後它將放大到4096x4096。最後它會在畫布上畫出4096x4096。

所以你有一個4096x4096 spritesheet。您想從該spritesheet剪下800x600的部分，並將該剪貼畫畫到畫布上：

// this will clip 800x600px from your source image 
// starting at top-left == [1600,0] 
// and it will paint that clipping at [0,0] on the canvas 
// while not changing the clipping size from its original 800x600 

ctx.drawImage(
    yourImage  // use yourImage as the source image 
    1600,0   // clip from the source image with top-left at [1600,0] 
    800,600   // clip 800x600px from the source 
    0,0    // paint the clipping at [0,0] on the canvas 
    800,600   // use the same 800x600 size that was clipped 
);

來源

2015-09-07 18:15:30 markE

我們需要查看更多代碼才能真正瞭解性能問題。

最有可能是大小，這是放緩你。 drawImage()爲easily the fastest method用於更新畫布，但還有其他一些可能會讓您減慢很多的事情，例如使用getImageData()或低效的Javascript。

來源

2015-09-07 18:04:00 EvilZebra

畫布drawImage在大型源代碼上很慢

回答

相關問題