Question

我似乎无法找到关于如何做到这一点的任何可靠信息，所以我想知道是否有人可以指出我正确的方向。

我有一个大的精灵表，我们称之为textures.png。每个纹理都是64x64像素，我需要能够从这些纹理中创建模式。

createPattern（）是一个很棒的函数，但它似乎只接受两个参数，即图像源以及是否重复它。如果你为每个纹理加载一个图像，这很好，但我想知道如何使用textures.png这样做。

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

提前致谢！

Answer 1

好的，我已经找到了解决方案。基本上，createPattern（）可以将image或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以覆盖它的尺寸。

使用带有createPattern（）的精灵表

1 个答案: