0

私のプログラムでは、キャンバスに画像を複数回描画しています。私のコードは次のようになります。

<img id="image1" src="image1.png" width="200" height="100" hidden ="hidden">
<script type ="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image1, 50, 50, 200, 100);
        ctx.drawImage(image1, 100, 100, 200, 100);
<script/>

私の質問は、このイメージのインスタンスを 1 つだけ削除することは可能ですか? たとえば、100,100 で描画された画像を削除して、50,50 で描画された画像を残すだけですか?

4

1 に答える 1

1

キャンバスに何かを描いた瞬間、それは独立したオブジェクトではなくなり、キャンバス上のピクセルの集まりになります。これらのピクセルが一緒になってより大きなオブジェクトを形成するという情報は失われます。context.clearRect を使用して削除することもできますが、同じ領域に描画されている他のものもすべて消去されるため、画像が他のコンテンツと重なっていると、目的の処理が行われません。

キャンバス全体をクリアし、画像なしでシーン全体を再度描画することをお勧めします。

もう 1 つのオプションは、CSS ポジショニングを使用して互いの上に配置することにより、複数のキャンバスをレイヤーとして使用することです。こうすることで、上のキャンバスの透明なピクセルが下のキャンバスのコンテンツを表示します。これにより、キャンバスの上または下の内容に影響を与えることなく、1 つのキャンバスの一部を消去できます。

于 2013-03-27T22:04:10.240 に答える