我在HTML5画布的2D上下文中渲染几种图案(每种图案都有不同的纹理)时遇到了困难。
假设我有三个单独的画布,其中两个包含不同的纹理,另一个用于渲染。让这些离线画布分别为A和B。
然后:
var patternA = ctx.createPattern(A, "repeat-x");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,20);
var patternB = ctx.createPattern(B, "repeat-y");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,20,20);
应该有两个20x20的矩形,每个都有自己的图案,但第二个矩形根本没有渲染出来。我已经尝试了一切方法来让它们正常工作,但是都没有成功。
为什么会这样?怎样才能在同一个画布上渲染多个平铺纹理?