Question

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

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

Answer 1

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

这里更详细地回答了这个问题：

"Erasing" in html5 canvas

Answer 2

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

Answer 3

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 4

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 5

使用globalCompositeOperation＆＃34;目标输出＆＃34;的透明橡皮擦代码和＆＃34; source-over＆＃34;

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代码集成

Answer 6

将铅笔颜色设置为透明：

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

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

HTML5 Canvas橡皮擦

6 个答案: