0

我有以下函数使用 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()画布上绘制的图像吗？

4

1 回答 1

0

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

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

 context.fillStyle = this.fill;
 context.fillRect( x, y, width, height );
于 2012-04-26T01:59:30.973 回答