image - CocoonJS Canvas 图像图案填充不起作用

Question

我正在使用 HTML5 Canvas 来绘制 GUI。

图像图案填充在浏览器（包括移动设备）中运行良好，但是当我在 Android 或 iPad 上使用 Cocoon JS 启动器时，纹理图案仅显示为黑色。

var pattern = context.createPattern(imageResource,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,300,300);

查看 CocoonJS 控制台，纹理正在正确加载，并且context.drawImage()可以很好地处理相同的图像。

文档表明支持 Canvas 模式。任何想法为什么模式填充在 CocoonJS 启动器中不起作用？

谢谢

Answer 1

I managed to track this down to the fact I was loading image resources after initialising Three JS (renderer, camera etc).

Despite the fact I was waiting for image resources to load before attempting a Canvas texture fill, if within the Cocoon launcher, I got the 'no fill' problem.

All I did was change the order of things: load image resources first, then initialise ThreeJS. Fill seems to work perfectly now within the launcher, although I'm not entirely sure why.

Answer 2

CocoonJS 支持画布模式。此示例在具有 POT 和 NPOT 纹理的 CocoonJS Launcher 上运行良好：

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function() {
    var pattern = ctx.createPattern(img,"repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0,0,300,300);
}
img.src = "img.png";

请分享更多代码以重现问题。