如何擦除畫布而不擦除背景

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

如果我需要進一步解釋，我會。

先感謝您。

Answer 1

有幾種方法可以解決這個問題。

我建議把圖像作為畫布的CSS“background-image”。 然后照常在畫布上畫畫。

如果要將Canvas保存為圖像，則需要執行一系列事件：

1. 創建一個與普通畫布一樣大的內存中畫布。 叫它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) //將（已保存的）第一個畫布繪制回自身

這將讓您擁有兩全其美。

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

      });