Question

您好我正在我的应用程序中使用html5和javascript构建一个Windows应用商店我正在尝试实现一个橡皮擦工具，但这是有问题的，因为如果用户将图像或其他图层移动到他们之前已擦除的位置，他们会看到他们擦除的白色绘图。我一直试图从不同的方式做橡皮擦工具，例如我已将默认的globalCompositeOperation更改为“destination-out”，如此代码

          //Here is the error.
        if (clickTool[j] == "eraser") {
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = 'rgba(255,0,0,0.5);';
            ctx.strokeStyle = 'rgba(255,0,0,0.5);';

        }
        else {
            ctx.globalCompositeOperation = "source-over";
            ctx.strokeStyle = clickColor[j];
        }

但不幸的是它对我不起作用。我已将所有代码上传到此链接：

My code

我想有人可以帮助我。

谢谢，我很抱歉我的演讲，我是墨西哥人。

Answer 1

使用多个图层。有一个画布用于背景图像，另一个画布用于绘图;这就是为什么你永远不会删除任何背景图像。

如果需要，您可以拥有多个图层，因为它们通常不会影响性能。

当然，如果您认为图纸是“永久性的”，那么如果您可以组合图层，请将最后绘制的波浪线描述为背景图层。

Answer 2

保持一系列中间点。使用globalCompositeOperation作为＆＃39; destination-out＆＃39;首先和来源＆＃39;后来制作透明的橡皮擦。

以下是您需要使用鼠标移动功能的代码

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

    }        

  };

我使用此代码制作橡皮擦，其行为类似于笔，并填充透明色而非白色

html5画布中的橡皮擦工具

2 个答案: