使用带有 createPattern() 的精灵表答案

【问题标题】：Using a sprite sheet with createPattern()使用带有 createPattern() 的精灵表
【发布时间】：2014-01-31 18:41:10
【问题描述】：

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

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

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

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

提前致谢！

【问题讨论】：

标签： html canvas repeat sprite-sheet

【解决方案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 以覆盖其尺寸。

【讨论】：

在 drawImage function 的 5 参数版本中，后两个参数表示输出图像中的偏移。要选择输入 spritesheet 的正确部分，drawImage 调用应使用 9 参数版本：pattern_context.drawImage(img, texture_sx, texture_sy, texture_width, texture_height, 0, 0, texture_width, texture_height);