画布图像遮罩/重叠 [英] Canvas image masking / overlapping
问题描述
在我的项目中，我必须使用画布在另一个相同大小和图案的图像上实现一个不同的彩色图像，并且图像不是圆形或矩形.所有这些都是波浪形的，它将应用于单个主背景图像，以在每个 onclick 功能上显示多个图形.
In my project i have to implement one different color image on the other same size and pattern image using canvas and images are not in round or rectangle shapes. That all are in waves shape and it will apply on a single main background image for showing multiple graphics on every onclick function.
重叠的图像应更改为另一种选定的颜色.我的问题 有没有办法使用画布，我们可以更改由画布绘制的图像颜色，或者我们需要始终使用不同的图像并使用 CSS/jQuery.
Overlapped image should be change in another selected color. My question Is there any way with using canvas from that we can change the image color which is draw by canvas or we need to use different images always and apply with CSS/jQuery.
我阅读了有关画布图像遮罩和重叠的信息.但是无法理解我的图像，因为它们不是方形或圆形，那么首先是我如何在单个图像上绘制多个波形.我不知道我搜索过但未能找到完美的解决方案.
I read about canvas image masking and overlapping. But cant understand with my images because that are not in square or circle shape then first thing is how i draw multiple wave shapes on a single image. I have no idea about that i searched but fail to search perfect solution.
我的需要只是在画布上绘制一个波浪图像并通过单击功能更改其颜色，并设置另一个带有背景图像的 div，并且两个画布将重叠.这可能吗?
My need is just draw one wave image on canvas and change its color from on click function and also set an another div with background-image and also more then two canvas will overlapped. Is this possible?
(即:此功能用于在汽车上创建或设置多个图形，因为每个图形图像需要设置在画布中，而另一个图形需要重叠在 div 和第一个画布上)
(That means : This functionality is for create or set multiple graphics on a car, for that each graphic image need to set in a canvas and for another graphic need to overlapped on div and first canvas)
推荐答案
您可以使用上下文合成来替换图像的一部分.
例如，如果您已经将此蓝色徽标作为图像:
For example, if you have this blue logo already as an image:
任何您希望徽标顶部为紫色的任何内容:
Any you want the top part of the logo to be colored purple:
您可以使用合成为图像的顶部重新着色.
首先，使用您最喜欢的图像编辑器剪掉您不想重新着色的任何部分.
First, use your favorite image editor to crop away any part you don’t want recolored.
剩下的称为叠加层.
我们将以编程方式重新着色图像的这个叠加部分.
This overlay part of the image is what we will programmatically recolor.
此叠加层可以通过编程重新着色为任何颜色.
This overlay can be programatically recolored to any color.
如何以编程方式重新着色叠加层:
- 在空白画布上绘制叠加层.
- 将合成模式设置为source-in".
- 效果:仅替换现有像素——透明像素保持透明
- 现在绘制一个覆盖画布的任何颜色的矩形
- (记住，只有现有的叠加层会被新颜色替换)
如何使用更改后的叠加颜色完成徽标
- 将合成模式设置为destination-atop"
- 效果:仅替换透明像素——现有像素保持不变
- 现在绘制原始标志
- (请记住，现有的彩色叠加层不会被替换)
这种destination-atop"合成效果有时被称为drawing under".
This "destination-atop" compositing effect is sometimes called "drawing under".
这个覆盖层甚至可以用纹理代替！
This overlay can even be replace with textures!
这是代码和小提琴:http://jsfiddle.net/m1erickson/bfUPr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var truck,logo,overlay;
var newColor="red";
var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/boxTruck.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/TVlogoSmall.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/TVlogoSmallOverlay.png");
loadAllImages();
function loadAllImages(){
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){ imagesOK++; imagesAllLoaded(); };
img.src = imageURLs[i];
}
}
var imagesAllLoaded = function() {
if (imagesOK==imageURLs.length ) {
// all images are fully loaded an ready to use
truck=imgs[0];
logo=imgs[1];
overlay=imgs[2];
start();
}
};
function start(){
// save the context state
ctx.save();
// draw the overlay
ctx.drawImage(overlay,150,35);
// change composite mode to source-in
// any new drawing will only overwrite existing pixels
ctx.globalCompositeOperation="source-in";
// draw a purple rectangle the size of the canvas
// Only the overlay will become purple
ctx.fillStyle=newColor;
ctx.fillRect(0,0,canvas.width,canvas.height);
// change the composite mode to destination-atop
// any new drawing will not overwrite any existing pixels
ctx.globalCompositeOperation="destination-atop";
// draw the full logo
// This will NOT overwrite any existing purple overlay pixels
ctx.drawImage(logo,150,35);
// draw the truck
// This will NOT replace any existing pixels
// The purple overlay will not be overwritten
// The blue logo will not be overwritten
ctx.drawImage(truck,0,0);
// restore the context to it's original state
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=500 height=253></canvas>
</body>
</html>
这篇关于画布图像遮罩/重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
