無法使用現有圖像清除畫布

Question

我正在嘗試在畫布中已有圖像時將其空白。

我想刪除舊圖像並加載從var getfrontimage獲取的新圖像。

但這使我失敗了。

    $('#fittocanvasfront').click(function () {
        var canvas = document.getElementById("canvas-front");
        var c = canvas.getContext("2d");
        var getfrontimage = $('#image-tocanvaschangefront').attr('src');

        var img = new resize(getfrontimage);
        function resize(src) {
            console.log('blank canvas');
            canvas.width = canvas.width;
            var image = new Image();
            image.src = getfrontimage;
            image.width = canvas.width;
            image.height = canvas.height;
            image.onload = function () {
                // clearing canvas
                c.clearRect(0, 0, canvas.width, canvas.height);
                //loading image
                c.drawImage(image, 0, 0);
                //creating a hole in canvas
                var centerX = canvas.width / 2;
                var centerY = canvas.offsetTop;
                var radius = 30;
                c.beginPath();
                c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
                c.fillStyle = 'black';
                c.fill();
            }
        }
    });

進入腳本-

我在<img>標簽中有圖片-

   var getfrontimage = $('#image-tocanvaschangefront').attr('src');

上面這張圖片是清除畫布后我將要使用的圖片。

所以我嘗試在加載圖像時按以下方式將畫布清空-

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

但這沒有用，我嘗試在點擊時將畫布清空

   $('#fittocanvasfront').click(function () {
            var canvas = document.getElementById("canvas-front");
            var c = canvas.getContext("2d");
            c.clearRect(0, 0, canvas.width, canvas.height);
              });

如何清空包含現有圖像的畫布。

Answer 1

你說的不是真的。 您可以使用clearRect清除任何圖像。 請查看您的代碼，在單擊時清除圖像的小提琴 。

$("#canvas-front").click(function(){
   c.clearRect(0, 0, canvas.width, canvas.height);
});

很難說您在做什么錯，因為您沒有提供完整的代碼，請使用我在提琴中提供的代碼，一切都很好。