HTML5 Gomma per canvas

Question

Esiste un modo per implementare una gomma (oltre all'uso di una matita bianca?).

Sto usando il layering, ho un'immagine sotto la tela, quindi, se la gomma dipinge di bianco, l'utente noterà poiché l'immagine in basso non è bianca.

Answer 1

impostare il colore matita per trasparente:

context.fillStyle = "rgba(255,0,0,0)"; 

in formato rgba(), l'ultimo è il canale alfa, 0 è totalmente trasparente

Answer 2

In alternativa, è possibile utilizzare più <canvas> oggetti disegnati sopra a vicenda, quindi cancellare dalla tela superiore per rivelare l'immagine sottostante. Vedi: html5 - canvas element - Multiple layers

Answer 3

Fondamentalmente, impostare globalCompositeOperation su copy e dipingere utilizzando un colore con opacità zero, ad es. "rgba(0,0,0,0)" come stavi provando.

la questione è risolta in un po 'più in dettaglio qui:

"Erasing" in html5 canvas

Answer 4

function eraser() 
{         
context.strokeStyle = "rgb(255, 255, 255)"; 
context.globalCompositeOperation = "copy"; 
context.strokeStyle = ("rgba(255,255,255,255)"); /* or */ context.fillStyle = "rgba(255,0,0,0)"; 
} 

entrambi lavorato nel mio caso!

Answer 5

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

In realtà la funzione è:

function eraser(){        
    context.strokeStyle = "rgb(255, 255, 255)"; 
    context.globalCompositeOperation = "destination-out"; 
    context.strokeStyle = ("rgba(255,255,255,255)"); 
    /* or */ 
    context.fillStyle = "rgba(255,0,0,0)"; 
} 

E si può tornare alla sorgente-over.

Answer 6

Codice per gomma trasparente mediante globalCompositeOperation "destinazione-out" e "source-over"

var handleMouseMove = function (event) { 
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1); 

    if(curTool.type=="eraser"){ 

     var tempcanvas = document.getElementById('drawcanvas'); 
     var tempctx=tempcanvas.getContext("2d"); 
     tempctx.beginPath(); 
     tempctx.globalCompositeOperation = "destination-out"; 
     tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);  
     tempctx.fill(); 
     tempctx.closePath(); 
     tempctx.globalCompositeOperation = "source-over"; 
     drawingCanvas.graphics.clear(); 

     // keep updating the array for points 
     arrMidPtx.push(midPt.x); 
     arrMidPty.push(midPt.y); 
     stage.addChild(drawingCanvas); 
     stage.update(); 

    } 

ho usato easeljs qui tuttavia il codice è indipendente da esso e può essere integrato con qualsiasi JavaScript disegno tela html5 codice