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的修改都会降低您的速度，因此您需要确保尽可能多地批量调用。

为什么Canvas可能会变慢，可能有很多原因，所以我建议您遵循http://www.html5rocks.com/en/tutorials/canvas/performance/中提到的一些想法。

在html5中绘制图像/纹理

1 个答案: