HTML5 画布橡皮擦

Posted 2023-03-05

【中文标题】HTML5 画布橡皮擦

【英文标题】：HTML5 Canvas eraser

【发布时间】：2011-04-16 22:54:44

【问题描述】：

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

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

【参考方案1】：

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

其实功能是：

function eraser()
    context.globalCompositeOperation = "destination-out";  
    context.strokeStyle = "rgba(255,255,255,1)";

你可以回到源代码。

【参考方案2】：

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

【参考方案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)";

两者都适用于我的情况！

【讨论】：

这不能远程工作。 proof

【参考方案4】：

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

    

我在这里使用了easeljs，但是代码独立于它，可以与任何canvas html5绘图javascript代码集成

【参考方案5】：

将铅笔颜色设置为透明：

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

rgba()格式，最后一个为alpha通道，0为全透明

【讨论】：

它不起作用。 “橡皮铅笔”剧照以红色（实际绘图铅笔的颜色）绘制。

尝试将颜色设置为简单的“透明”（dev.w3.org/csswg/css3-color/#transparent），或者可以使用strokestyle 而不是fillstyle

=( 什么都没有。我已经尝试过 context.strokeStyle = "rgba(0,0,0,0)"; 和 context.fillStyle = "rgba(0,0,0,0)" ;. 有什么想法吗？