image - 在 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都会减慢您的速度，因此您要确保尽可能多地批处理调用。

Canvas 绘制缓慢的原因可能有很多，因此我建议遵循http://www.html5rocks.com/en/tutorials/canvas/performance/中提到的一些想法。