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

通常、幅または高さの値を設定することで、キャンバス全体をクリアできます。

キャンバスの 1 つの領域をクリアしたい場合は、その領域に fillRect を描画することでそれを行うことができます。たとえば、fillStyle をキャンバスの背景色と同じ色に設定します。

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