在画布中填充一部分绘制的图像

Question

我使用html5 canvas的drawImage()api绘制了一个图像.现在我想用不同的颜色填充该绘制图像的白色空间(单个盒子单独的颜色).我该怎么做？我正在使用html5 canvas和jquery.

我想用不同的颜色填充白色空间,那些白色空间不是正确的矩形框.

提前致谢.

Answer 1

[在提问者澄清后改变了答案]

给定:图像具有许多完全封闭的透明区域.

这是一种用不同颜色填充每个透明区域的方法:

1. 使用context.getImageData获取每个画布像素[r,g,b,a]值的数组.

2. 循环通过数组并找到第一个透明像素("a"值== 0)

3. 使用新的不透明颜色填充包含该像素的整个透明区域(用新颜色替换r,g,b值并替换"a"值== 255).

4. 重复步骤#2,直到所有透明区域都填充了新的独特颜色.

为了让你开始......

William Malone撰写了一篇非常好的文章,介绍如何获取和使用canvas的[r,g,b,a]颜色数组.

他的文章还向您展示了如何"填充" - 在整个连续区域中用新颜色替换现有颜色.

在您的情况下,您将使用新颜色替换透明像素.

这是他的文章:

http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/

[问题补充:将图像插入区域]

您需要使每个颜色区域再次透明 - 一次一个

如果从最初为区域着色时保存每个区域的起始像素,则可以从该像素开始并重新填充区域.这次你将该区域中每个像素的alpha分量设置为0(透明).

由于每个单个区域都是透明的,因此您只能在现有像素透明的情况下使用合成来绘制新图像.你想要的复合是context.globalCompositeOperation ="source-out".

这些例子显示:

• 对每个区域进行独特着色后.
• 使1个区域透明后(右上方区域是透明的).
• 将图像合成到透明区域后.