6

我正在使用 HTML5 画布来加载图像的单个实例，然后将其多次 blit 到单个画布上。图像需要一些轻微的基于像素的操作才能对其进行自定义。我最初的攻击计划是加载图像，将其粘贴到支持画布上，在其上绘制我的修改，然后获取图像数据并将其缓存以供将来使用。

这是我为此编写的一些代码：

context.drawImage(img, 0, 0);
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 2, 2);  // Draw a 2x2 rectangle of white pixels on the top left of the image

imageData = context.getImageData(0, 0, img.width, img.height);
cusomImage = imageData;

虽然这可行，但我注意到我的图像（这是一个透明的 PNG）不能保持透明度。相反，当使用 putImageData 将其放置到我的正面画布上时，它会以黑色背景呈现。如何保持透明度？

欢迎任何建议！

4

2 回答 2

5

putImageData() 不符合您的预期： http ://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData() 直接覆盖画布的像素。因此，如果您在同一画布上绘制其他东西，它不会“覆盖”它，而是会用它的像素替换该区域中画布的像素。

我遇到了这个确切的问题，终于找到了原因。

至于解决方案，我还没有尝试过，但似乎很有希望： 为什么 putImageData 这么慢？

[编辑]：我测试了这种方法，对我来说效果很好，我的数据现在可以正确显示透明度。

于 2011-04-12T02:25:57.770 回答
0

画布创建后是黑色的。首先使其透明：

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);
于 2011-03-14T08:59:08.123 回答