在画布上如何擦除内容而不影响背景

Question

我有一个画布，我使用drawimage()将其作为背景。

我有一个橡皮擦工具，我想用它来擦除我所画的内容，但不是画布上的图片。我知道可以将图片作为单独的元素放在画布后面，但这不是我想要的，因为我想将画布中的内容保存为图像。

我的绘图函数在这里：

function draw (event) {     
    if (event == 'mousedown') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'mousemove') {
        context.lineTo(xEnd, yEnd);
    } else if (event == 'touchstart') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'touchmove') {
        context.lineTo(xEnd, yEnd);
    }
    context.lineJoin = "round";
    context.lineWidth = gadget_canvas.radius;
    context.stroke();                   
}

如果需要进一步解释，我会做的。谢谢您提前的帮助。

- ryuutatsuo

---

你的描述听起来有点不对。你能不能在画布上面放一层，然后以一种允许你保留背景图像（画布）元素的方式“保存”这个图层合成呢？ - Jared Farrish

context 是一个全局可用的对象吗？ - Jared Farrish

在每次重新绘制图形时，您需要先绘制图像——作为背景——然后再在其上面绘制其他所有内容。这样，当您从“上层”中删除某些东西时，图像将保持不变（因为它始终是在每次重新绘制时首先绘制的）。您还可以查看类似fabric.js的画布抽象库。 - kangax

Answer 1

有几种方法可以做到这一点。

我建议将图像作为画布的CSS "background-image"。然后像平常一样在画布上绘制。

当您想将Canvas保存为图像时，您需要执行以下一系列事件：

1.创建一个和普通Canva一样大的内存画布。称之为can2

2.ctx2.drawImage(can1, 0, 0) // 将第一个画布绘制到新画布上

3.ctx.clearRect(0, 0, width, height) // 清除第一个画布

4.ctx.drawImage(background, 0, 0) // 在第一个画布上绘制图像

5.ctx.drawImage(can2, 0, 0) // 将（已保存的）第一个画布绘制回其本身

这将使您获得最佳效果。

- Simon Sarris

---

将图像设置为背景后，保存画布为图像时，它不会被捕获。对我来说，drawImage也无法正常工作...您可以查看https://dev59.com/lq3la4cB1Zd3GeqPM3Po...还请您检查https://stackoverflow.com/questions/51720673/angular-6-canvas-todataurlimage-png-not-capturing-canvas-background-image - Flutterian

Answer 2

我将图像路径保存在一个数组中，当我清除画布时，我再次调用init函数：

$( ".clear_canvas" ).click(function() {

      console.log("clear"); 

      var canvas = document.getElementById("canvasMain"),
      ctx=canvas.getContext("2d");

      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      //load the image again
      init(path,width,height);

      });

- mboeckle