Question

我有以下函数使用JavaScript将图像绘制到HTML5画布上：

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
            };
            image.src = "StartButton.png";

            var boundingBox = myGameCanvas.getBoundingClientRect();

            boundingBox.onmousemove = function(e){
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                var pixels = context.getImageData(mouseX, mouseY, 1, 1);
            }
        }

图像将用作按钮，单击时将调用另一个功能。单击按钮时我想要调用的函数是：

function drawLevelOneElements(){
            image.onload = function(){
                context.drawImage(image, 50, 30, 20, 20); 


            };
            image.src = "1.png";
}

我在画布上添加了一个事件监听器，它监听按钮上的一个单击，并在单击时显示该函数。这当前工作正常，但是，虽然函数drawLevelOneElements（）被调用并绘制到画布上，但是调用drawStartButton（）绘制的图像仍然显示在画布上，所以我在两个函数的内容上显示帆布在同一时间。

我想要发生的是，当单击按钮时，按钮会消失，而drawLevelOneElements绘制的元素将显示在画布上，而不再有开始按钮。

有人能告诉我如何在画布上绘制后从画布中清除drawStartButton（）绘制的图像吗？

感谢。

Answer 1

通常，您可以通过设置宽度或高度值来清除整个画布。

如果要清除画布的一个区域，可以通过在该区域上绘制fillRect来实现 - 例如，将fillStyle设置为与画布的背景颜色相同的颜色。

 context.fillStyle = this.fill;
 context.fillRect( x, y, width, height );

从使用javascript放置在那里的html5画布中删除图像

1 个答案: