html - 使用带有 createPattern() 的 Sprite 表

Question

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

我有一个很大的 sprite 表，我们称它为 textures.png。每个纹理都是 64x64 像素，我需要能够从这些纹理中创建图案。

createPattern() 是一个很棒的函数，但它似乎只有两个参数，图像源和是否重复。如果您为每个纹理加载单个图像，这很好，但我想知道如何使用 textures.png 执行此操作。

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

提前致谢!

Answer 1

好的，我已经找到了解决方案。基本上，createPattern() 可以将图像或 Canvas 元素作为其第一个参数。因此，您需要执行以下操作:

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 以覆盖其尺寸。