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之前。

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

Answer 2

您应该在画布上实际运行clearRect：

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

永久清除Canvas中的绘图

2 个答案: