1

我正在编写一个小型演示程序来测试 canvas+ 性能。但是 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上发布了我的代码

请点击第三个链接 water_ripple 查看结果。请点击右上角按钮返回主页。主 js 文件是 js/demo.js。主要函数是 waterRippleLoop()。我正在尝试一些水波纹模拟代码。

4

2 回答 2

0

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

1.- 您是否使用 Canvas+ 在另一台 Android 设备（或 iOS 设备）上对其进行了测试并且是否有效？2.- 你能提供整个示例源代码吗？越简单越好。

问候，伊克尔。

于 2015-05-17T17:36:43.243 回答
0

我已经进一步调查了这个问题，但无论如何都没有让它在 2.1 中工作。尽管如此，正如你所说，它确实像chrome这样的普通浏览器一样工作。

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

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

在我的测试用例中，当我使用 getImageData 复制顶部的一张并使用 putImageData 再次显示时，应该显示 2 张图片。

普通浏览器（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

于 2015-05-21T18:56:11.807 回答