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

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的矩形，每个都有自己的图案，但第二个矩形根本没有渲染出来。我已经尝试了一切方法来让它们正常工作，但是都没有成功。

为什么会这样？怎样才能在同一个画布上渲染多个平铺纹理？

- Miha Petelin

Answer 1

你正在尝试哪些浏览器？在FireFox和Chrome中，我无法使用repeat-x或repeat-y来渲染任何一个模式。相反，我只能使用repeat来渲染这两个模式。 （请参见http://jsfiddle.net/ZthsS/1/）

浏览器可能有不完整的规范实现。根据http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-createpattern上的实现状态，IE beta和FF nightly通过了所有测试用例，但其他浏览器没有。我建议暂时只使用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);

- Brian Nickel

---

看起来是这样的情况。我猜我现在只能使用repeat了。谢谢！ - Miha Petelin