javascript - 在 Canvas 中填充一部分绘制的图像

Question

我使用 html5 canvas 的 drawImage() api 绘制了一个图像。现在我想用不同的颜色(单个框的单个颜色)填充该绘制图像的空白区域。我该怎么做？我正在使用 html5 Canvas 和 jquery。

我想用不同的颜色填充空白，这些空白不是合适的矩形框。

提前致谢。

Answer 1

[提问者澄清后更改答案]

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

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

1. 使用 context.getImageData 获取每个 Canvas 像素 [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 个区域透明后(右上区域透明)。
• 将图像合成到透明区域后。