画布图像遮蔽/重叠 [英] Canvas image masking / overlapping
问题描述
在我的项目中，我必须实现一个不同的颜色图像在另一个相同的大小和模式图像使用画布和图像不是圆形或矩形形状。所有都是波形，它将应用在单个主背景图像上，以在每个 onclick 函数上显示多个图形。
重叠的图片应以其他所选颜色更改。我的问题有任何方式使用画布，我们可以更改的图像颜色是由画布或我们需要使用不同的图像总是和应用CSS / jQuery。
我阅读了关于画布图像遮蔽和重叠的内容。但不能理解与我的图像，因为那不是正方形或圆形形状，那么第一件事是如何在一个单一的图像上绘制多个波形。我不知道我搜索，但未能搜索完美的解决方案。
我的需要只是在画布上绘制一个波形图像，并改变其颜色从点击功能，设置另一个div与背景图像，也更多然后两个画布会重叠。这是可能的吗？
（这意味着：此功能用于在汽车上创建或设置多个图形，因为每个图形图像需要在画布中设置，图形需要重叠在div和第一个画布上）
您可以使用上下文合成来替换图像的一部分。
例如，如果您已有此蓝色标志作为图片：
任何你想要的顶部要标记为紫色的标志：
您可以使用合成来重新着色图片的顶部。
首先，使用您喜爱的图片编辑器裁剪掉不要需要重新着色的任何部分。
剩下的部分称为重叠。
图片的重叠部分是我们将以编程方式重新着色。
此叠加层可以编程为任何颜色。 p>
重叠图层是如何编程重新着色的： strong>
- 在空画布上绘制叠加层。
- 将合成模式设置为source -in。
- 效果：仅替换现有像素 - 透明像素保持透明
- （请注意，只有现有的重叠式广告会被新颜色取代）
如何使用已更改的重叠颜色完成徽标
- 将合成模式设置为destination-atop
- 效果：只替换现有像素的透明像素原始徽标
- （请记住，现有的彩色重叠式广告不会被替换）
这个叠加层甚至可以用纹理替换！
>
代码和小提琴： http://jsfiddle.net/m1erickson/bfUPr/
<！doctype html&
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =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）{
//所有映像已完全加载即可使用
truck = imgs [0];
logo = imgs [1];
overlay = imgs [2];
start（）;
}
};
function start（）{
//保存上下文状态
ctx.save（）;
//绘制叠加图
ctx.drawImage（overlay，150,35）;
//将合成模式更改为source-in
//任何新绘图只覆盖现有像素
ctx.globalCompositeOperation =source-in;
//绘制画布大小的紫色矩形
//只有叠加将变为紫色
ctx.fillStyle = newColor;
ctx.fillRect（0,0，canvas.width，canvas.height）;
//将合成模式更改为destination-atop
//任何新绘图都不会覆盖任何现有像素
ctx.globalCompositeOperation =destination-atop;
//绘制完整的标志
//这将不会覆盖任何现有的紫色重叠像素
ctx.drawImage（logo，150,35）;
//绘制卡车
//这将不会替换任何现有的像素
//紫色覆盖不会被覆盖
//蓝色标志不会被覆盖
ctx.drawImage（truck，0,0）;
//将上下文恢复为原始状态
ctx.restore（）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< canvas id =canvaswidth = 500 height = 253>< / canvas>
< / body>
< / html>
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.
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.
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?
(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)
You can use context compositing to replace part of an image.
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:
You can use compositing to recolor the top part of the image.
First, use your favorite image editor to crop away any part you don’t want recolored.
What’s left is called an overlay.
This overlay part of the image is what we will programmatically recolor.
This overlay can be programatically recolored to any color.
How the overlay was programatically recolored:
- Draw the overlay on an empty canvas.
- Set the compositing mode to "source-in".
- The Effect: Only existing pixels are replaced—transparent pixels remain transparent
- Now draw a rectangle of any color the covering the canvas
- (remember, only the existing overlay will be replaced with the new color)
How to complete the logo with the changed overlay color
- Set the compositing mode to "destination-atop"
- The Effect: Only transparent pixels are replaced—existing pixels remain unchanged
- Now draw the original logo
- (remember, the existing colored overlay will not be replaced)
This "destination-atop" compositing effect is sometimes called "drawing under".
This overlay can even be replace with textures!
Here is code and a Fiddle: 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屋！
