javascript - HTML5 canvas 二维上下文中的多个图像模式？

Question

我在 HTML5 canvas 的 2d 上下文中渲染多个图案(每个图案具有不同的纹理)时遇到困难。

假设我有三个独立的 Canvas ，两个离屏包含不同的纹理，另一个用于渲染。让这些离线 Canvas 成为 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 的矩形，每个都有自己的图案，但是第二个矩形根本不呈现。我已尽一切努力使它们正常工作，但无济于事。

这是为什么呢？我应该如何将多个平铺纹理渲染到同一个 Canvas 上？

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);