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

我在HTML5 canvas的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);

应该有两个20×20矩形,每个矩形都有自己的图案,但是第二个矩形根本不渲染.我已尽一切努力使它们工作,但无济于事.

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

解决方法:

您正在尝试使用哪些浏览器？使用FireFox和Chrome,我无法获得用重复x或重复y渲染的任何图案.取而代之的是,我能够使两者都重复渲染. (请参见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每晚都通过所有测试用例,但其他浏览器则未通过.我建议暂时只使用重复.您可以通过简单地将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);

标签：canvas,html5-canvas,javascript
来源： https://codeday.me/bug/20191201/2084291.html