永久從Canvas清除工程圖

Question

我有一個功能，當單擊一個按鈕時，會將所有圖形從畫布的背景圖像中清除掉，但是當您再次進行繪制時，舊的（先前已清除的圖形）會重新出現。 如何進行硬刪除，以便無需重新加載頁面即可再次繪制

'use strict';

function initCanvas() {
let bMouseIsDown = false;
let canvas = document.getElementById('cvs');
let ctx = canvas.getContext('2d');
let convert = document.getElementById('convert');
let sel = 'png';
let imgs = document.getElementById('imgs');
let imgW = 300;
let imgH = 200;

let background = new Image();
background.crossOrigin = '';
background.src = "http://i.imgur.com/yf6d9SX.jpg";

background.onload = function(){
     ctx.drawImage(background,0,0,600,400);
}
bind(canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown);
};

initCanvas()


function bind (canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown) {
    let iLastX = 0;
    let iLastY = 0;
let iX;
let iY;
    canvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - canvas.offsetLeft +         (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    canvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    canvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
            iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            ctx.moveTo(iLastX, iLastY);
            ctx.lineTo(iX, iY);
            ctx.stroke();
            ctx.strokeStyle = "blue";
            ctx.lineJoin = "round";
            ctx.lineWidth = 5;
            iLastX = iX;
            iLastY = iY;
        }
    };

  document.getElementById('clear').addEventListener('click',      function() {
    rerenderImg();
  });
   function rerenderImg() {
   iY = [];
  iX=[];
  initCanvas()
  }
  };

Answer 1

您需要調用ctx.beginPath(); 在再次在畫布上繪制之前。 合乎邏輯的放置位置是在調用ctx.moveTo之前。

這里給出了為什么需要這樣做的解釋。

Answer 2

您實際上應該在畫布上運行clearRect ：

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