在html5中繪製圖像/紋理

Question

情況：我正在創建一個遊戲，每個玩家都有它的蛇。

問題：在特殊情況下，玩家蛇可能超過千弧。我在每次打勾時重畫畫布（我試圖獲得60fps）。現在，由於繪製的弧線過多，速度非常慢。

我的想法：將每個玩家的蛇畫成圖像/紋理，並且只爲畫布上的每個玩家重繪整個圖像。

我的問題：這可能嗎？如果是，我需要搜索什麼？我並不是遊戲開發經驗豐富的人。

Answer 1

我建議看看context.createPattern方法。您可以動態創建一個新的畫布並在其上繪製複雜的圖像。完成一次繪製後，您可以撥打context.createPattern(dynamicCanvas, 'no-repeat')，然後保留對該模式的引用。然後，無論何時您想繪製該蛇，將您的上下文轉換到適當的位置，並將context.fillStyle設置爲您的圖案，然後填入適合您圖案的矩形。下面是一些通用代碼：

// Only do this once per unique snake, not per frame 
var patternCanvas = document.createElement("canvas"); 
// Set the size to be the minimum size to draw your snake on 
patternCanvas.width = 100; 
patternCanvas.height = 100; 
// code that draws snake onto patternCanvas here 
// ... 

// Create the pattern 
var pattern = patternCanvas.getContext("2d").createPattern(patternCanvas, "no-repeat"); 

// Using your real canvas that's drawing every frame 
var realContext = realCanvas.getContext("2d"); 
realContext.save(); 
realContext.translate(50, 80); // x, y coordinates of where you want to draw your snake 
realContext.fillStyle = pattern; 
realContext.fillRect(0, 0, 100, 100); // The last two parameters are your width and height of your snake pattern 
realContext.restore(); 

注意createPattern可以採取整個畫布對象，你永遠需要的patternCanvas追加到DOM對象，因此它就像一個後臺緩衝。

繪製圖案時，請嘗試在同一個save/restore內繪製它們。只要不斷翻譯和填充矩形。每個save/restore和對context的修改都會降低您的速度，因此您要儘可能確保您正在分批撥打電話。

可能有許多原因爲什麼畫布可能會拖慢，所以我建議您遵循http://www.html5rocks.com/en/tutorials/canvas/performance/中提到的一些想法。