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

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

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

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

这是我当前的代码（fiddle http://jsfiddle.net/3nq4acts/这里也）：

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

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

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

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

非常感谢！

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

合成告诉画布在画布上绘制其他新图形（像素）时要做什么。

就您而言，学习 3 种合成模式很有用。

源头合成

默认的合成方法是“源覆盖”，即在现有像素上绘制新绘图。

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

then results

源顶合成

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

then results

目的地合成

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

then results

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

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

2. 画出爪子图像。

3. 将合成设置为source-atop因此，新的绘图只会在现有爪子像素存在的地方绘制。

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

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

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

7. 将合成设置回默认值source-over因此新的图纸将绘制在现有图纸的基础上。

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

这是示例代码和演示：

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

var images=[];
var urls=[];
urls.push('http://s7.postimg.org/aruxhs8mz/pink.png');
urls.push('http://s7.postimg.org/69smposl7/paw.png');
var imgCount=urls.length;

document.getElementById('recolor').onclick=function(){
  redrawWithNewPawColor();
};

for(var i=0;i<urls.length;i++){
  images[i]=new Image();
  images[i].onload=myOnload;
  images[i].src=urls[i];
}
function myOnload(){
  imgCount--;
  if(imgCount>0){return;}
  start();
}
function start(){
  redrawWithNewPawColor()
}

function drawWithRecoloredPaw(newPawColor){

  // clear the canvas
  ctx.clearRect(0,0,can.width,can.height);

  // draw the paw
  ctx.drawImage(images[1], 0, 0);  

  // set compositing to source-atop
  // so only existing pixels will be overwritten
  ctx.globalCompositeOperation='source-atop';
  // fill with new color
  ctx.fillStyle=newPawColor;
  // Because of compositing, only the paw is being color filled
  ctx.fillRect(0,0,can.width,can.height);

  // set compositing to destination-over
  // so new pixels will be draw behind existing (paw) pixels
  ctx.globalCompositeOperation='destination-over';
  // change the fill color to yellow
  ctx.fillStyle='yellow';
  // fill the yellow box
  ctx.fillRect(40,0,250,300);   

  // set compositing to the default of source-over
  ctx.globalCompositeOperation='source-over';
  // draw the transparent frame
  ctx.drawImage(images[0],0,0);

}

function redrawWithNewPawColor(){
  drawWithRecoloredPaw(randomColor());
}

function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<button id='recolor'>Recolor Paw</button>
<br>
<canvas id="canvas1" width=600 height=600></canvas>