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');

以上图片是清理画布后我将使用的。

所以当我加载图片时，我尝试将canvas绘制为空 -

 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 清除任何图像。请使用您的代码查看fiddle，点击图片后即可清除图片。

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

很难说你做错了什么，因为你没有提供完整的代码，使用我提供的代码并且一切都应该没问题。

无法用现有图像清除画布

1 个答案: