image - 在 html5 中绘制图像/纹理

Question

情况:我正在创建一个每个玩家都有蛇的游戏。

问题:在特殊情况下，一条玩家蛇可能超过千弧。我在每个刻度上重新绘制 Canvas (我尝试获得 60fps)。现在，由于要绘制的弧太多，速度变得非常慢。

我的想法:将每个玩家的蛇绘制到图像/纹理上，并且只为 Canvas 上的每个玩家重新绘制整个图像。

我的问题:这可能吗？如果是，我需要搜索什么？我在游戏开发方面经验不足。

Answer 1

我建议查看 context.createPattern 方法。您可以动态地创建一个新 Canvas 并在其上绘制您的复杂图像。完成一次绘制后，您可以调用 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 可以获取整个 Canvas 对象，您永远不需要将 patternCanvas 附加到 DOM 对象，因此它就像一个后台缓冲区。

绘制图案时，尝试在同一个save/restore 中绘制它们。继续平移和填充矩形。每次 save/restore 和对 context 的修改都会减慢你的速度，所以你要确保尽可能多地批处理调用。

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