javascript - 永久清除 Canvas 中的绘图

Question

我有一个功能，当单击按钮时，可以清除 Canvas 中背景图像中的所有绘图，但是当您再次绘图时，旧的(之前清除的绘图)会重新出现。如何进行硬删除，以便无需重新加载页面即可再次绘制

'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();然后再次在 Canvas 上绘制。 合理的放置位置是在调用 ctx.moveTo 之前。

here 给出了为什么需要这样做的解释。 .