在HTML5上放新圖像之前如何清除Canvas？

Question

親愛的我有一個小的html5 canvas項目，該示例從codepen到使用html5 canvas拖放圖像的示例。 示例工作正常，但是一旦放置新圖像，我就會遇到問題，然后所有圖像區域都重疊。 以下是JavaScript代碼

<script>
  var imgW;
  function drawImg() {
    var x = document.getElementById('myCanvas');
    var canvax = x.getContext('2d'); 
    var imgElement = document.getElementById('imgCanvas');
    var imgObj = new Image();
    imgObj.src = imgElement.src;
    var imgW = imgObj.width;
    var imgH = imgObj.height;
    var imgX = canvax.canvas.width * .5 - imgW * .5;
    var imgY = canvax.canvas.height * .5 - imgH * .5;
    imgObj.onload = function () {
      canvax.clearRect(imgX, imgY, imgW, imgH); 
      canvax.drawImage(imgObj, imgX, imgY, imgW, imgH); 
    };
  }

  $(document).ready(function () {
    $('.listImg li').draggable({ containment: 'document', opacity: 0.60, revert: false, helper: 'clone',
      start: function () {
        $('.infoDrag').text('Start Drag');
      },
      drag: function () {
        $('.infoDrag').text('on Dragging');
      },
      stop: function () {
        $('.infoDrag').text('Stop Dragging');
      } });

    $('#myCanvas').droppable({ hoverClass: 'dashborder', tolerance: 'pointer',
      drop: function (ev, ui) {
        var droppedItem = $(ui.draggable).clone();
        var canvasImg = $(this).find('img');
        var newSrc = droppedItem.find('img').attr('src');
        canvasImg.attr("src", newSrc);
        drawImg();
      } });

    $('#myCanvas').dblclick(function () {
      $('#myCanvas').draggable();
    });
  });
</script>

我需要在放置新圖像之前先清除圖像。 我可能需要使用clearRect方法。 但由於嘗試了幾次，但沒有用。 任何建議或指導將不勝感激，謝謝。

Answer 1

代替使用（新加載的）圖像的大小和位置作為邊界矩形，您提供給clearRect（）的是使用畫布本身的大小。

只需更改

canvax.clearRect(imgX, imgY, imgW, imgH);

至

canvax.clearRect(0, 0, x.width, x.height);