Toile masquer l'image de chevauchement

Dans mon projet, j'ai pour mettre en œuvre les différentes couleurs de l'image sur l'autre, de même taille et de l'image de motif à l'aide de toile et les images ne sont pas en rond ou rectangle formes. Que tous sont dans des ondes de forme et il va s'appliquer sur une seule image de fond pour montrer plusieurs images sur tous les onclick fonction.

Se chevauchent image doit être modifié dans une autre couleur sélectionnée. Ma question Est-il possible avec l'aide de toile que l'on peut changer la couleur de l'image qui se dessine en toile ou nous avons besoin d'utiliser des images différentes et toujours appliquer avec CSS/jQuery.

J'ai lu sur la toile l'image de masquage et de chevauchement. Mais ne peux pas comprendre avec mes images, car qui ne sont pas en carré ou en cercle de la forme puis la première chose est de savoir comment je dessine de multiples formes d'onde sur une seule image. Je n'ai aucune idée sur ce que j'ai cherché, mais ne parviennent pas à la recherche de la solution idéale.

Mon besoin est juste de dessiner une vague image sur la toile et le changement de sa couleur de sur cliquez sur la fonction et aussi de mettre un autre div avec un background-image et aussi plus de deux canevas se chevauchent. Est-ce possible?

(Qui signifie : Cette fonctionnalité est pour le créer ou définir plusieurs graphiques sur une voiture, pour que chaque image graphique, il faut créer une toile et un autre graphique doivent se chevauchent sur les div et première toile)

C'est un peu pas clair ce que vous demandez - vous voulez dessiner des images à l'intérieur d'une forme d'onde - que la forme de l'onde de clips les images? Vous pouvez simplement définir la forme sur la toile et le clip d'appel(). La prochaine chose dessinée sera découpé à l'intérieur de la forme que vous d'abord défini.
Monsieur, je n'ai pas utiliser de la toile à jamais? Aussi, j'ai ajouter un peu plus de texte pour plus d'effacer mes fonctionnalité.

InformationsquelleAutor Anup | 2013-08-22

44

Vous pouvez utiliser le contexte de composition pour remplacer une partie d'une image.

Par exemple, si vous avez ce logo bleu déjà comme une image:

Vous voulez la partie supérieure du logo de couleur pourpre:

Vous pouvez utiliser la composition à redéfinir les couleurs de la partie supérieure de l'image.

Tout d'abord, utilisez votre éditeur d'image préféré à rogner une partie que vous ne pas voulez recolorée.

Ce qui est à gauche est appelé une superposition.

Cette superposition d'une partie de l'image est ce que nous allons par programme recolorer.

Cette superposition peut être par programmation recolorée à n'importe quelle couleur.

Comment la superposition a été par programmation recoloriés:
1. Dessiner la superposition sur une toile vierge.
2. Régler le mode de composition à la source “dans”.
3. L'Effet: Uniquement les pixels sont remplacés transparents les pixels restent transparents
4. Maintenant, tracez un rectangle de la couleur du revêtement de la toile
5. (rappelez-vous, l'overlay sera remplacée par la nouvelle couleur)
La façon de remplir le logo avec le changement de couleur de superposition
1. Régler le mode de composition à “destination-sommet”
2. L'Effet: Seulement les pixels transparents sont remplacés—pixels existants restent inchangés
3. Maintenant dessiner le logo original
4. (rappelez-vous, la couleur de superposition ne sera pas remplacé)
Cette "destination-au sommet de la" composition de l'effet est parfois appelé “dessin de la vertu”.

Cette superposition peut-être même de les remplacer avec des textures!

Voici le code et un Violon: http://jsfiddle.net/m1erickson/bfUPr/
```
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="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>
```
- Mon besoin est juste de dessiner une vague image sur la toile et le changement de sa couleur de sur cliquez sur la fonction et aussi plus de deux canevas se chevauchent, Est-il possible?
- Oui c'est possible et vous n'avez même pas besoin de 2 toiles: jsfiddle.net/m1erickson/bfUPr
- Merci encore mon frère, mais dans votre exemple, la couleur de l'image est en train de changer à chaque fois mais si je veux changer uniquement la partie supérieure alors? votre exemple est à proximité de mon besoin, mais pas une réponse exacte, veuillez essayer encore une fois
- Modifié l'exemple encore une fois... jsfiddle.net/m1erickson/7G6xn ...Maintenant seulement la partie supérieure change de couleur en cliquant sur la toile. 🙂
- salut marc j'ai besoin de masquer la zone de chevauchement de l'image.stackoverflow.com/questions/29943533/... . C'est la question que j'ai posté. Merci de me donner une solution. Je l'ai faite dans un tissu js.
- Super réponse! M'a beaucoup aidée faire de la circulaire des images avec transparence autour d'eux, en combinaison avec ceci :).
InformationsquelleAutor markE
51

La question, comme il est un peu incertaine de l'OMI. Pour donner une réponse d'ordre général que vous pouvez appliquer à un scénario où vous avez besoin d'écrêtage vous pouvez utiliser (au moins) deux approches:

Méthode 1 - en Utilisant le mode composite à clip

Mode Composite est la façon la plus simple mais aussi la moins flexible que vous devez vous pré-définir le masque d'écrêtage comme une image avec un fond transparent (généralement PNG).

Vous pouvez soit utiliser les parties solides de l'image pour le clip de la prochaine tiré chose, ou utiliser les zones transparentes à remplir.

Ici est une approche où nous utilisons les parties solides pour le clip de la prochaine forme dessinée/image:
```
///draw the shape we want to use for clipping
ctx1.drawImage(imgClip, 0, 0);
///change composite mode to use that shape
ctx1.globalCompositeOperation = 'source-in';
///draw the image to be clipped
ctx1.drawImage(img, 0, 0);
```
Ici la globalCompositeOperation est changé à source-in ce qui signifie que la source de l'image (celle que nous allons en tirer à côté de la destination) sera tiré à l'intérieur de l'existant des données solides. Rien ne sera attirée sur les zones transparentes.

Si notre masque d'écrêtage ressemble à ceci (aléatoire juste utiliser sur le net):

Et de notre image comme ceci:

Le résultat sera ce:

Méthode 2 - à l'Aide d'un Chemin d'accès à clip

Vous pouvez également définir un Chemin d'accès pour l'écrêtage. C'est très flexible que vous pouvez ajuster le chemin d'accès ou l'animer si vous le désirez.

Note: Juste avoir à l'esprit que la coupure à l'aide de Chemin est actuellement un peu "fragile" dans les navigateurs de sorte que vous devriez envisager d'utiliser save() et restore() avant et après la fixation et à l'aide d'un clip de chemin que les navigateurs sont pas en mesure de réinitialiser le clip à l'instant (restore permettra de restaurer la valeur par défaut clip = pleine toile);

Permet de définir une simple trajectoire en zigzag (ce sera votre vagues dans votre cas):
```
///use save when using clip Path
ctx2.save();
ctx2.beginPath();
ctx2.moveTo(0, 20);
ctx2.lineTo(50,0);
///... more here - see demo
ctx2.lineTo(400, 20);
ctx2.lineTo(400, 100);
ctx2.lineTo(0, 100);
ctx2.closePath();
///define this Path as clipping mask
ctx2.clip();
///draw the image
ctx2.drawImage(img, 0, 0);
///reset clip to default
ctx2.restore();
```
Maintenant que nous avons mis le masque d'écrêtage à l'aide de clip rien attirée sur le canevas suivant sera découpé pour s'adapter à l'intérieur de cette forme (notez que nous assurez-vous que la forme peut-end, où il a commencé):

Voir la démo en ligne de ces méthodes ici
- Mon besoin est juste de dessiner une vague image sur la toile et le changement de sa couleur de sur cliquez sur la fonction et aussi plus de deux canevas se chevauchent, Est-il possible?
- pourquoi ne pas simplement utiliser deux images dans ce cas?
- Je suis très nouveau pour la toile, je ne sais pas quelque chose que j'ai également changer les couleurs de dessiner une image de ne pas le remplacer. si je peux remplacer une image puis j'ai une autre méthode aussi avec css3 et jquery que je puisse le remplacer très facilement mais le client ne voulez seulement avec html5/canvas..
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.

Méthode 1 - en Utilisant le mode composite à clip

Méthode 2 - à l'Aide d'un Chemin d'accès à clip