通过 createPattern() 使用精灵表

Question

我似乎找不到任何有关如何执行此操作的可靠信息，所以我想知道是否有人可以为我指出正确的方向。

我有一个大的精灵表，我们将其命名为textures.png。每个纹理都是 64x64 像素，我需要能够根据这些纹理创建图案。

createPattern() 是一个很棒的函数，但它似乎只需要两个参数：图像源和是否重复。如果您为每个纹理加载单个图像，这很好，但我想知道如何使用textures.png 来做到这一点。

我找到了这个答案https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background但我不确定接受的答案是指generatePattern()方法，据我所知，这甚至不是画布方法。

提前致谢！

Answer 1

好的，我已经解决了这个问题。基本上，createPattern() 可以将图像或画布元素作为其第一个参数。所以你需要执行以下操作：

var pattern_canvas = document.createElement('canvas');

pattern_canvas.width = texture_width;
pattern_canvas.height = texture_height;

var pattern_context = pattern_canvas.getContext('2d');

pattern_context.drawImage(img , texture_sx , texture_sy , texture_width , texture_height);

var final_pattern = canvas_context.createPattern(pattern_canvas , "repeat");

canvas_context.fillStyle = final_pattern;
canvas_context.fillRect( 0 , 0 , canvas.width , canvas.height );

如果您这样做，那么您的画布元素将重复绘制pattern_canvas以覆盖其尺寸。