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

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

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

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

这是我当前的代码，这里也有：

HTML:

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

我编造了一把小提琴，只是想用我的问题来启发你

希望有人能帮我的任何建议

---

非常感谢

问题在于画布不允许您调整图像，但您可以在不透明度为0.5的paw上创建一个块，然后再次填充透明部分，您还可以使用以下方法：

---

问题在于画布不允许您调整图像，但您可以在不透明度为0.5的paw上创建块，然后再次填充透明部分，您还可以使用以下方法：

---

如果图像位于您自己的web文件夹中，您可以将其与img标记一起使用，获取数据并对其进行更改

很像W3S示例

在这一步之后，只需使用新数据重新绘制画布

---

如果图像来自另一个来源，由于安全原因，这将不起作用

如果图像位于您自己的web文件夹中，您可以将其与img标记一起使用，并获取数据并对其进行更改

很像W3S示例

在这一步之后，只需使用新数据重新绘制画布

如果图像来自其他来源，则此操作将不起作用，因为安全原因

您可以通过合成完成任务

合成告诉画布在画布上绘制其他新图形像素时要执行的操作

在您的案例中，学习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);

然后结果

源代码合成

“source Top”合成将仅在新像素与现有画布像素重叠的位置绘制新像素

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

然后结果

目标覆盖合成

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

然后结果

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

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

绘制爪子图像

将“合成”设置为“源”，以便仅在现有paw像素存在的位置绘制新图形

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

将合成设置为目标覆盖，以便在现有像素下绘制新图形

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

把这个黄色的盒子装满。您的paw不会被覆盖，因为新的黄色像素将在您的paw下绘制

将合成设置回默认源，以便在现有图形的基础上绘制新图形

绘制中间透明的框架。你的爪子和黄色背景将通过透明的画面中心显示出来

下面是示例代码和演示：

var can=document.getElementById'canvas1'； var ctx=can.getContext'2d'； var ctx2=can.getContext'2d'； var图像=[]； var url=[]； URL.push'http://s7.postimg.org/aruxhs8mz/pink.png'; URL.push'http://s7.postimg.org/69smposl7/paw.png'; var imgCount=url.length； document.getElementById'Recolr'.onclick=function{ 用新的颜色重新绘制； }; forvar i=0；i0{return；} 开始 } 功能启动{ 用新颜色重新绘制 } 函数DrawWithRecolredPawnewPawColor{ //清理画布 ctx.clearRect0,0，罐宽，罐高； //拔爪子 ctx.drawImageimages[1]，0,0； //将合成设置为“源” //因此，只有现有像素将被覆盖 ctx.globalCompositeOperation='source-top'； //用新颜色填充 ctx.fillStyle=newPawColor； //由于合成，只有爪子被颜色填充 ctx.fillRect0,0，罐宽，罐高； //将合成设置为目标覆盖 //因此，新像素将在现有paw像素后面绘制 ctx.globalCompositeOperation='destination-over'； //将填充颜色更改为黄色 ctx.fillStyle='yellow'； //把这个黄色的盒子装满 ctx.fillRect40,02503000； //将合成设置为默认的“源覆盖” ctx.globalCompositeOperation='source-over'； //绘制透明框架 ctx.drawImageimages[0]，0,0； } 使用NewPawco重新绘制函数 洛尔{ 使用重新着色的随机颜色绘制； } 函数{ return+Math.floorMath.random*16777215.toString16； } 正文{背景色：象牙色；填充：10px；} 画布{边框：1px纯红；} 回爪 你可以用合成来完成你的任务

合成告诉画布在画布上绘制其他新图形像素时要执行的操作

在您的案例中，学习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);

然后结果

源代码合成

“source Top”合成将仅在新像素与现有画布像素重叠的位置绘制新像素

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

然后结果

目标覆盖合成

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

然后结果

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

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

绘制爪子图像

将“合成”设置为“源”，以便仅在现有paw像素存在的位置绘制新图形

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

将合成设置为目标覆盖，以便在现有像素下绘制新图形

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

把这个黄色的盒子装满。您的paw不会被覆盖，因为新的黄色像素将在您的paw下绘制

将合成设置回默认源，以便在现有图形的基础上绘制新图形

绘制中间透明的框架。你的爪子和黄色背景将通过透明的画面中心显示出来

下面是示例代码和演示：

var can=document.getElementById'canvas1'； var ctx=can.getContext'2d'； var ctx2=can.getContext'2d'； var图像=[]； var url=[]； URL.push'http://s7.postimg.org/aruxhs8mz/pink.png'; URL.push'http://s7.postimg.org/69smposl7/paw.png'; var imgCount=url.length； document.getElementById'Recolr'.onclick=function{ 用新的颜色重新绘制； }; forvar i=0；i0{return；} 开始 } 功能启动{ 用新颜色重新绘制 } 函数DrawWithRecolredPawnewPawColor{ //清理画布 ctx.clearRect0,0，罐宽，罐高； //拔爪子 ctx.drawImageimages[1]，0,0； //将合成设置为“源” //因此，只有现有像素将被覆盖 ctx.globalCompositeOperation='source-top'； //用新颜色填充 ctx.fillStyle=newPawColor； //由于合成，只有爪子被颜色填充 ctx.fillRect0,0，罐宽，罐高； //将合成设置为目标覆盖 //因此，新像素将在现有paw像素后面绘制 ctx.globalCompositeOperation='destination-over'； //将填充颜色更改为黄色 ctx.fillStyle='yellow'； //把这个黄色的盒子装满 ctx.fillRect40,02503000； //将合成设置为默认的“源覆盖” ctx.globalCompositeOperation='source-over'； //绘制透明框架 ctx.drawImageimages[0]，0,0； } 使用NewPawColor重新绘制函数{ 使用重新着色的随机颜色绘制； } 函数{ return+Math.floorMath.random*16777215.toString16； } 正文{背景色：象牙色；填充：10px；} 画布{边框：1px纯红；} 回爪

---

只是为了让舒尔知道你想做什么：你尝试更改paw.png的颜色正确吗？嗨@treeno，是的，我想填写paw.png的颜色：只是为了让舒尔知道你想做什么：你尝试更改paw.png的颜色正确吗？嗨@treeno，是的，我想填写paw.png的颜色：嗨@markE，非常感谢你的回答。我将检查并研究此合成，然后我将向您更新：只是确认一下，如果有两个以上的重叠图像，这仍然适用吗？例如，如果我必须为多个图像着色。合成告诉浏览器如何处理现有像素和新像素之间的关系。因此，它适用于您在问题中提出的两个重叠图像。当您想要覆盖3+个图像时，您可以使用内存画布中的第二个来一次合成2个图像集。然后将每个合成集作为层绘制到屏幕画布上。祝你的项目好运！你好，马克，非常感谢你的回答。我将检查并研究此合成，然后我将向您更新：只是确认一下，如果有两个以上的重叠图像，这仍然适用吗？例如，如果我必须为多个图像着色。合成告诉浏览器如何处理现有像素和新像素之间的关系。因此，它适用于您在问题中提出的两个重叠图像。当您想要覆盖3+个图像时 ，您可以使用第二个内存画布一次合成两个图像集。然后将每个合成集作为层绘制到屏幕画布上。祝你的项目好运！