javascript - Enmascaramiento de imagen de lienzo/superposición

canvas html5-canvas

Question

En mi proyecto, tengo que implementar una imagen de color diferente en el otro mismo tamaño e imagen de patrón usando lienzo y las imágenes no tienen forma redonda o rectangular. Todo está en forma de ondas y se aplicará en una sola imagen de fondo principal para mostrar múltiples gráficos en cada función onclick .

La imagen solapada debe cambiarse en otro color seleccionado. Mi pregunta: ¿Hay alguna forma de usar canvas desde que podemos cambiar el color de la imagen que se dibuja por lienzo o tenemos que usar diferentes imágenes siempre y aplicar con CSS / jQuery.

Leí sobre el enmascaramiento y superposición de imágenes de lienzos. Pero no puedo entender con mis imágenes porque no están en forma de círculo o cuadrado, entonces lo primero es cómo dibujo múltiples formas de onda en una sola imagen. No tengo idea de que busqué pero no busqué la solución perfecta.

Mi necesidad es simplemente dibujar una imagen de onda en el lienzo y cambiar su color de la función de hacer clic y también establecer otro div con imagen de fondo y también más de dos lonas se superponen. es posible?

(Esto significa: esta funcionalidad es para crear o establecer múltiples gráficos en un automóvil, para lo cual cada imagen gráfica debe configurarse en un lienzo y para otro gráfico debe superponerse en div y en el primer lienzo)

Answer 1

La pregunta tal como está es un poco impreciso OMI. Para dar una respuesta más general que puede aplicar a un escenario donde necesita recorte, puede usar (al menos) dos enfoques:

Método 1 - Usar el modo compuesto para recortar

El modo compuesto es la manera más simple pero también la menos flexible, ya que necesita predefinir la máscara de recorte como una imagen con un fondo transparente (generalmente PNG).

Puede usar las partes sólidas de la imagen para recortar la siguiente cosa dibujada, o usar las áreas transparentes para completar.

Aquí hay un enfoque donde utilizamos las partes sólidas para recortar la siguiente forma / imagen dibujada:

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

Aquí, globalCompositeOperation se cambia a source-in que significa que la imagen de origen (la que vamos a dibujar al lado del destino) se dibujará dentro de los datos sólidos existentes. Nada se dibujará en las áreas transparentes.

Si nuestra máscara de recorte se ve así ( uso justo al azar de la red):

Y nuestra imagen así:

El resultado será este:

Método 2 - Usar una ruta para recortar

También puede definir una ruta para el recorte. Esto es muy flexible ya que puede ajustar la ruta o animarla si lo desea.

Nota: Solo tenga en cuenta que el recorte utilizando Path es actualmente un poco "frágil" en los navegadores, por lo que debería considerar usar save() y restore() antes y después de configurar y usar una ruta de clip ya que los navegadores no pueden restablecer el clip en el momento ( restore restaurará el clip predeterminado = lienzo completo);

Vamos a definir un sendero en zig-zag simple (estas serán tus ondas en tu caso):

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

Ahora que hemos configurado la máscara de recorte con el clip cualquier elemento dibujado en el lienzo se recortará para que quepa dentro de esa forma (tenga en cuenta que nos aseguramos de que la forma pueda finalizar donde comenzó):

Vea la demostración en línea de estos métodos aquí

Answer 2

Puede usar la composición de contexto para reemplazar parte de una imagen.

Por ejemplo, si ya tiene este logotipo azul como imagen:

Cualquiera que desee que la parte superior del logotipo sea de color morado:

Puede usar la composición para volver a colorear la parte superior de la imagen.

Primero, use su editor de imágenes favorito para recortar cualquier parte que no desee recolored.

Lo que queda se llama superposición.

Esta parte superpuesta de la imagen es lo que cambiaremos de color programáticamente.

Esta superposición se puede recolocar programáticamente a cualquier color.

Cómo se recolonó la superposición mediante programación:

1. Dibuja la superposición en un lienzo vacío.
2. Establezca el modo de composición en "source-in".
3. El efecto: solo se reemplazan los píxeles existentes : los píxeles transparentes permanecen transparentes
4. Ahora dibuja un rectángulo de cualquier color que cubra el lienzo
5. (recuerde, solo la superposición existente será reemplazada por el nuevo color)

Cómo completar el logotipo con el color de superposición cambiado

1. Establezca el modo de composición en "destino-encima"
2. El efecto: solo se reemplazan los píxeles transparentes; los píxeles existentes permanecen sin cambios
3. Ahora dibuja el logo original
4. (recuerde, la superposición de colores existente no será reemplazada)

Este efecto de composición "destino en la parte superior" a veces se denomina "dibujar debajo".

¡Esta superposición puede reemplazarse con texturas!

Aquí hay un código y un violín: 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//boxTruck.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952//TVlogoSmall.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952//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>