如何填充多个画布图像的颜色？ [英] How to fill color of more than one canvas image?

问题描述

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

It's my first time to use html5 canvas and I have no idea yet how it works.

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

My problem is, I have to modify the colors of the images in the canvas. It's easy if there's only one image. But, I will have more than one, in other words, overlapping images.

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

To further understand my question, I created an illustration. There will be 2 image files only, Image 1 and Image 2:

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

This is my current code (with fiddle here too):

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

我应该可以填写爪子图像了中间也是，而不仅仅是主要形象。怎么做？

I should be able to fill the paw image in the middle as well and not just the main image. How to do that?

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

I have created a fiddle just to enlighten you with my question.

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

Hope someone can help me for any advice.

非常感谢！

推荐答案

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

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

Compositing tells the canvas what to do when drawing additional new drawings (pixels) on the canvas.

在您的情况下，3种合成模式对于学习。

In your case, 3 compositing modes are useful to learn.

源代码合成

合成的默认方法是' source-over'在现有像素上绘制新图形的地方。

The default method of compositing is 'source-over' where new drawings are drawn over existing pixels.

// 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合成

'source-atop'合成将仅在新像素与现有画布像素重叠的位置绘制新像素。

'source-atop' compositing will draw new pixels only where the new pixels overlap the existing canvas pixels.

// 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'合成将在现有画布像素下绘制新像素。

'destination-over' compositing will draw new pixels under the existing canvas pixels.

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

然后结果

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

Here's how to use compositing to change the color of your paw.

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

1. Clear the canvas. You cannot directly change the color of anything previously drawn on the canvas, so the typical workflow of canvas is to erase it and redraw items in their new positions & colors.

绘制爪子图像。

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

Set compositing to source-atop so new drawings will only be drawn where the existing paw pixels exist.

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

Fill the canvas with your new paw color using fillStyle & fillRect. This causes your paw to be recolored because the newly colored rectangle pixels will only appear where your paw pixels currently exist.

将合成设置为 destination-over 所以新图纸将在现有像素下绘制。

Set compositing to destination-over so new drawings will be drawn under existing pixels.

填充黄色框。您的爪子不会被覆盖，因为新的（黄色）像素将被绘制在您的爪子下面。

Fill the yellow box. Your paw will not be overwritten because new (yellow) pixels will be drawn "under" your paw.

将合成设置回默认值 source-over 所以新图纸将在现有图纸上绘制。

Set compositing back to the default source-over so new drawings will be drawn on top of existing drawings.

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

Draw your frame that's transparent in the center. Your paw and the yellow background will show through the transparent center of your frame.

以下是示例代码和演示：

Here's example code and a Demo:

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>

这篇关于如何填充多个画布图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！