HTML5帆布橡皮擦

Question

有一种实现橡皮擦的方法（除了使用白色铅笔？）。

我正在使用分层，在画布下方有一个图像，所以，如果橡皮擦涂成白色，用户会注意到，因为下面的图像不是纯白色的。

Answer 1

设置铅笔颜色到透明：

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

在rgba()格式，最后一个是α通道，0是完全透明的

Answer 2

作为替代方案，可以使用绘制在多个<canvas>对象然后从顶部画布擦除以显示下方的图像。参见：html5 - canvas element - Multiple layers

Answer 3

基本上，将globalCompositeOperation设置为copy，并使用不透明度为0的颜色（例如， "rgba(0,0,0,0)"你正在尝试。

的问题是回答在这里更详细一点：

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

无论是在我的情况下工作！

Answer 5

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

其实功能是：

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

你可以回到源过来。

Answer 6

代码用于使用globalCompositeOperation“目的地-out”和“源极 - 之上”

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

    } 

透明橡皮擦我已经使用easeljs这里但是代码是独立于它，并且可以与任何画布HTML5绘制的javascript被集成代码