我似乎找不到任何有关如何执行此操作的可靠信息,所以我想知道是否有人可以为我指出正确的方向。
我有一个大的精灵表,我们称之为textures.png。每个纹理都是 64x64 像素,我需要能够根据这些纹理创建图案。
createPattern() 是一个很棒的函数,但它似乎只需要两个参数:图像源和是否重复。如果您为每个纹理加载单个图像,这很好,但我想知道如何使用textures.png 来做到这一点。
我找到了这个答案https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background但我不确定generatePattern() 方法所接受的答案指的是什么,据我所知,这甚至不是画布方法。
提前致谢!
好的,我已经解决了这个问题。基本上,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以覆盖其尺寸。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)