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

CocoonJS支持Canvas模式。此示例在具有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";

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

Answer 2

我设法在初始化三个JS（渲染器，相机等）之后跟踪我正在加载图像资源的事实。

尽管在尝试Canvas纹理填充之前我正在等待加载图像资源，但如果在Cocoon启动器中，我得到了“没有填充”＃39;问题

我所做的就是改变事物的顺序：首先加载图像资源，然后初始化ThreeJS。填充似乎现在在发射器内完美地工作，虽然我不完全确定原因。

CocoonJS Canvas图像模式填充不起作用

2 个答案: