CocoonJS画布图像模式填充不工作

Question

我使用HTML5画布绘制GUI。

图像模式填充在浏览器(包括移动)中工作得很好，但是当我在Android或iPad上使用Cocoon启动器时，纹理模式只是显示为黑色。

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

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

文档表示支持画布模式。知道为什么模式填充在CocoonJS启动程序中不起作用吗？

谢谢

Answer 1

CocoonJS支持画布模式。这个示例在带有POT和NPOT纹理的CocoonJS启动器上工作得很好：

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

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

Answer 2

我设法跟踪这一点，因为我在初始化三个JS (渲染器、照相机等)之后加载了图像资源。

尽管我在等待图像资源加载后才尝试填充画布纹理，但如果在Cocoon中，我遇到了“没有填充”的问题。

我所做的就是改变事情的顺序:首先加载映像资源，然后初始化ThreeJS。虽然我不完全确定为什么，但Fill现在似乎在发射器内工作得很好。