javascript - 如何在 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() 的边界矩形，而是使用 Canvas 本身的大小。

简单地改变

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

至

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