如何填充多个画布图像的颜色？

Question

这是我第一次使用 html5 画布，我还不知道它是如何工作的。

我的问题是，我必须修改画布中图像的颜色。如果只有一张图片，这很容易。但是，我会有不止一个，换句话说，重叠的图像。

为了进一步理解我的问题，我创建了一个插图。只有 2 个图像文件，图像 1 和图像 2：

这是我当前的代码（这里也有小提琴）：

HTML：

<canvas id="canvas1" width="600" height="600"></canvas>

JS：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var ctx2 = can.getContext('2d');


ctx.fillStyle = 'yellow'; // background color. box in the middle is transparent. try changing this to see the effect
ctx.fillRect(40,0,250,300); // not sure if there's other way to fill in the tranparent area. but I created a box behind the image

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

img.src = "http://s7.postimg.org/aruxhs8mz/pink.png"; //image 1


// I want to fill in the paw image too
/*ctx2.fillStyle = 'purple'; 
ctx2.fillRect(40,0,500,500); */

//should I declare something like this again?

var img2 = new Image();
img2.onload = function() {
    ctx2.drawImage(img2, 0, 0);
}

img2.src = "http://s7.postimg.org/69smposl7/paw.png"; //image 2
//paw initially colored light blue. i would like to customize the color of this too

我应该能够在中间填充爪子图像，而不仅仅是主图像。怎么做？

我创建了一个小提琴只是为了用我的问题启发你。

希望有人可以帮助我提供任何建议。

谢谢一堆！

Answer 1

您可以使用合成来完成您的任务。

合成告诉画布在画布上绘制额外的新图画（像素）时要做什么。

在您的情况下，学习 3 种合成模式很有用。

源头合成

默认的合成方法是“source-over”，即在现有像素上绘制新图形。

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// second draw a red source rectangle
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

然后 结果

源头合成

'source-atop' 合成只会在新像素与现有画布像素重叠的地方绘制新像素。

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='source-atop';

// second draw a red source rectangle
// (red will overwrite only where it overlapped the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

然后 结果

目的地合成

'destination-over' 合成将在现有画布像素下绘制新像素。

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='destination-over';

// second draw a red source rectangle
// (red will appear under the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

然后 结果

以下是如何使用合成来更改爪子的颜色。

1. 清除画布。您无法直接更改以前在画布上绘制的任何内容的颜色，因此画布的典型工作流程是擦除它并在新位置和颜色中重新绘制项目。

2. 绘制爪子图像。

3. 将合成设置为source-atop仅在现有爪子像素存在的地方绘制新图形。

4. 使用fillStyle&用新的爪子颜色填充画布fillRect。这会导致您的爪子重新着色，因为新着色的矩形像素只会出现在您的爪子像素当前存在的位置。

5. 将合成设置为destination-over在现有像素下绘制新图形。

6. 填写黄色框。你的爪子不会被覆盖，因为新的（黄色）像素将被绘制在你的爪子“下方”。

7. 将合成设置回默认值，source-over以便在现有图纸之上绘制新图纸。

8. 绘制中间透明的框架。您的爪子和黄色背景将通过框架的透明中​​心显示出来。

这是示例代码和演示：

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// second draw a red source rectangle
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='source-atop';

// second draw a red source rectangle
// (red will overwrite only where it overlapped the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='destination-over';

// second draw a red source rectangle
// (red will appear under the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);