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

我使用html5画布的drawImage（）api绘制了一幅图像。现在我想用不同的颜色（单个框和单个颜色）填充绘制图像的空白。我怎么做？我正在使用html5画布和jquery

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

提前谢谢

---

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

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

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

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

循环遍历数组并找到第一个透明像素（“a”值==0）

用新的不透明颜色填充包含该像素的整个透明区域（用新颜色替换r、g、b值，并替换“a”值==255）

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

让您开始…

William Malone写了一篇关于如何获取和使用canvas的[r，g，b，a]颜色数组的非常好的文章

他的文章还向您展示了如何“泛光填充”——在整个相邻区域用新颜色替换现有颜色

在本例中，您将使用新颜色替换透明像素

这是他的文章：

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

---

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

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

由于每个区域都是透明的，因此仅在现有像素是透明的情况下使用合成来绘制新图像。所需的组合是context.globalCompositeOperation=“source out”

这些例子表明：

• 在对每个区域进行唯一着色后
• 使1个区域透明后（右上角区域透明）
• 将图像合成到透明区域后

---

//画一些白色、绿色和蓝色条纹

    for (var i = 0; i < canvas.width; i += 10) {
        for (var j = 0; j < canvas.height; j += 10) {
            context.fillStyle = (i % 20 === 0) ? "#fff" : ((i % 30 === 0) ? "#0f0" : "#00f");
            context.fillRect(i, j, 10, 10);
        }
    }
    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),
            pixels = imagedata.data;


       //if found white pixel i.e 255,255,255 changes it to 0,102,204

for（变量i=0；i

//你可以随心所欲地把它换成另一种颜色

    for (var offset = 0, len = pixels.length; offset < len; offset += 4) {

        if(pixels[offset]==255 &&
                pixels[offset+1]==255 &&
                pixels[offset+2]==255)

        {pixels[offset] = 0; //
        pixels[offset + 1] = 102; //
        pixels[offset + 2] = 204; //
        }

    }
    context.putImageData(imagedata, 0, 0);

for（var offset=0，len=pixels.length；offset

你能创建一个你所用代码的JSFIDLE，并给出你想要的东西的视觉线索吗？这里我想用不同的颜色填充空白，这些空白不是合适的矩形框。在这里，我想用不同的颜色填充空白，这些空白不是合适的矩形框。你的问题用这些信息就清楚了。请看我修改后的答案。谢谢markE给出的非常清晰的答案。现在我想把它带到下一个层次。如何将图像绘制到白色块中而不溢出到相邻块中。我浏览了你提到的链接。如何将其更改为用于图像而不是颜色填充。您需要使每个着色区域再次透明-**一次一个**（因为每个区域现在都是唯一的颜色，您可以使用透明度alpha=0泛光填充唯一的颜色）。当一个区域是透明的时，可以使用合成仅在现有像素是透明的情况下绘制新图像。您需要的组合是context.globalCompositeOperation=“source out”。非常感谢markE。谢谢你抽出时间。你以一种非常清晰的方式解释了我的所有问题…………如果有人感兴趣，以下是ABDULMOIZ代码的基础：