html5 - 将 Sprite 表与createPattern()一起使用

我似乎找不到任何关于如何做到这一点的可靠信息，所以我想知道是否有人能给我指明正确的方向。
我有一个很大的雪碧表，我们称之为textures.png。每个纹理是64x64像素，我需要能够创建这些纹理的模式。
createPattern（）是一个很好的函数，但它似乎只需要两个参数，图像源和是否重复它。如果要为每个纹理加载一个图像，这很好，但我想知道如何使用textures.png来执行此操作。
我找到了这个答案https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background，但我不确定所接受的答案是指generatePattern（）方法的什么，因为我知道这甚至不是一个canvas方法。
提前谢谢！

最佳答案

好吧，我已经找到解决办法了。基本上，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 );

如果执行此操作，则canvas元素将重复绘制pattern_canvas以覆盖其维度。