滾動畫布中的巨大背景

Question

我的問題是我工作的公司已經開始爲我爲他們製作的遊戲提供藝術，它擁有一個巨大的世界！它給了我一個巨大的背景圖像，像12923x5356！

我現在已經能夠讓它滾動並像背景一樣工作，但是在舊計算機上這是一箇舊的思維中心（注意它只能運行crunchbang和幾乎沒有xp），有點慢。看到我們希望能夠爲此支持平板電腦。這也使得他們覆蓋的東西變得更加複雜，同樣也變得更加複雜。

現在我只畫背景的畫布大小的塊所以只汲取儘可能多的可以看出，通過使用

ctx.drawImage(img, x, y, width, height, dx, dy, dwidth, dheight); 

與DX/DY總是繪製的相同點和X/y與主角色一起滾動。

現實地說，有沒有辦法可以做得更快？另一種我能想到的方式是，也許可以用getImageData將圖像分解爲小塊，然後用ctx.putImageData（img，x，y）填充屏幕。我從經驗中確信，drawImage的小形式比長形式要快一點，但是這會更快嗎？

任何人有任何想法，他們可以向我開槍？

Answer 1

您可以將它製作成更小的圖塊，就像Google地圖一樣。

我不確定你是否正在處理一些巨大的遊戲地圖，但技巧應該是相同的。您可以將地圖分割成小塊，例如256px * 256px。然後你只需要幾個256px * 256px的div來覆蓋視口。如果您改用canvas，則是一樣的。只需呈現當前顯示給用戶的那些圖塊。