HTML HTML5 borrador

Question

Hay una forma de implementar un borrador (que no sea el uso de un lápiz blanco?).

Estoy usando capas, tengo una imagen debajo del lienzo, entonces, si el borrador pinta en blanco, el usuario lo notará ya que la imagen de abajo no es blanca.

Answer 1

establecer el color del lápiz a transparente:

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

en rgba() formato, el último es el canal alfa, 0 es totalmente transparente

Answer 2

Como alternativa, se pueden utilizar varios <canvas> objetos dibujados sobre uno al otro, luego borre del lienzo superior para revelar la imagen debajo. Consulte: html5 - canvas element - Multiple layers

Answer 3

Básicamente, establezca globalCompositeOperation en y pinte usando un color con opacidad cero, p. Ej. "rgba(0,0,0,0)" como lo estabas intentando.

La pregunta se responde en un poco más de detalle aquí:

"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)"; 
} 

ambos trabajaron en mi caso!

Answer 5

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

En realidad, la función es:

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)"; 
} 

y se puede ir de nuevo a la fuente en off.

Answer 6

Código de goma transparente usando globalCompositeOperation "destino de salida" y "fuente-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(); 

    } 

he utilizado easeljs aquí sin embargo, el código es independiente de la misma y se puede integrar con cualquier javascript dibujo HTML5 Canvas código