html5画布中的橡皮擦工具

时间:2013-04-05 01:07:28

标签: html5 canvas html5-canvas

您好我正在我的应用程序中使用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

我想有人可以帮助我。

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

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

保持一系列中间点。使用globalCompositeOperation作为' destination-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();

    }        

  };

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