Question

我正在编写一个小型演示程序来测试画布+性能。但getImageData（），putImageData（）似乎不起作用。它在画布上留下了一个黑色方块。宽度和高度的一半大小，当然考虑到window.devicePixelRatio是2，某些不兼容的东西必须存在于某处。该程序在Chrome浏览器中运行良好。但是使用Cocoonjs启动器2.1.1将不起作用。

代码：

I 'm using requestAnimationFrame(loop);

ctx.drawImage(origin_img,0,0,410, 180, 0, 0, width, height);
texture = ctx.getImageData(0,0,width,height);

loop{
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0,0,width, height);
ctx.putImageData(texture, 0, 0);

}

结果是：我可以看到一个红色矩形，上面有一个1/4大小的黑色矩形。任何人都可以帮我吗？

ctx.drawImage（）将在程序中运行。

==============================

谢谢两位！我把代码发布在了 http://spikeyang.boxshell.com/static/js/src.zip

请点击第3个链接water_ripple查看结果。请点击右上角按钮返回主页。主要的js文件是js / demo.js.主要功能是waterRippleLoop（）。我正在尝试一些水波纹SIM代码。

Answer 1

我过去使用过getImageData和putImageData，它们在Canvas +中运行得很好。一些问题：

1.-您是否使用Canvas +在其他Android设备（或iOS设备）上测试过它并且它有效吗？ 2.-你能提供完整的示例源代码吗？越简越好。

此致伊克尔。

Answer 2

我已经进一步研究了这个问题，并且在任何情况下都没有让它在2.1中运行。然而，正如你所说，它确实像普通的浏览器如chrome一样有魅力。

因此我认为它是最新cooconjs版本中的一个错误，我将创建一个错误报告以获取有关该问题的更多信息。

为了澄清我创建了一个非常小的测试用例以显示问题： https://www.dropbox.com/s/j9zbjzhijxjxk54/test_case.zip?dl=0

在我的测试用例中，应该显示2张图片，我用getImageData复制顶部的图片，然后用putImageData再次显示。

普通浏览器（chrome）： https://www.dropbox.com/s/782akzq2cguek2j/photo_2015-05-21_20-43-05.jpg?dl=0

Coocon（只有一张图片）： https://www.dropbox.com/s/j20qnti0y3rw0gt/photo_2015-05-21_20-43-10.jpg?dl=0

getImageData（），putImageData（）无法在Nexus 4上运行，使用Cocoonjs canvas +

2 个答案: