Question

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

我想用不同颜色填充白色空格，而那些空白区域不是合适的矩形框。

提前感谢。

enter image description here

Answer 1

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

鉴于：图像中有许多完全封闭的透明区域。

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

使用context.getImageData获取每个画布像素[r，g，b，a]值的数组。
循环通过数组并找到第一个透明像素（“a”值== 0）
使用新的不透明颜色填充包含该像素的整个透明区域（用新颜色替换r，g，b值并替换“a”值== 255）。
重复步骤＃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区域透明后（右上区域透明）。
将图像合成到透明区域后。

enter image description here

Answer 2

//绘制一些白色，绿色和蓝色条纹

    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 (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);

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

2 个答案: