0

嗨，我正在我的应用程序中构建一个带有 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];
        }

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

我的代码

请我想有人可以帮助我。

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

4

2 回答 2

2

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

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

当然，如果您可以组合图层，如果您认为绘图是“永久的”，则将最后绘制的曲线说成背景图层。

于 2013-04-05T01:12:48.223 回答
0

维护一系列中点。首先将 globalCompositeOperation 用作“destination-out”，然后将“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();

    }        

  };

我使用此代码制作了一个橡皮擦，其行为类似于笔并填充透明颜色而不是白色

于 2015-02-28T09:55:21.477 回答