Question

我在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矩形，每个矩形都有自己的图案，但第二个矩形根本不渲染。我已经尝试了一切让他们工作，但无济于事。

为什么？我应该如何在同一个画布上渲染多个平铺纹理？

Answer 1

你在尝试什么浏览器？使用FireFox和Chrome，我无法使用repeat-x或repeat-y呈现任何模式。相反，我只能使用repeat进行渲染。（见http://jsfiddle.net/ZthsS/1/）

浏览器可能没有完整的规范实现。根据{{3}}的实施状态，IE beta和FF每晚都会通过所有测试用例，但其他浏览器则没有。我建议暂时只使用repeat。您可以通过简单地将fillRect的宽度限制为模式的宽度来模拟repeat-x和repeat-y：

var patternA = ctx.createPattern(A, "repeat");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,Math.min(20, A.height));

var patternB = ctx.createPattern(B, "repeat");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,Math.min(20, B.width), 20);

HTML5画布的2d上下文中的多个图像模式？

1 个答案: