1

こんにちは、キャンバスを使用して描画アプリを作成していますが、キャンバスをクリアする方法がわかりません。clearRect やその他の機能を試しましたが、機能しません。スクリプトの最後の 2 つの関数はキャンバスをクリアする必要がありますが、機能しません... (下手な英語で申し訳ありません) コードは次のとおりです。

  function clear_canvas_width ()
      {
            var s = document.getElementById ("scribbler");
            var w = s.width;
            s.width = 10;
            s.width = w;
        }

        function clear_canvas_rectangle ()
        {
               var canvas = $('#canvas')[0]; // or document.getElementById('canvas');
               canvas.width = canvas.width;
         }
4

3 に答える 3

4

問題が何であるかを実際に確認するには、もう少しコードが必要です。これは、おそらくそれを絞り込むことができる非常に単純なものです。また、パフォーマンス上の理由からclearRect、キャンバスの幅をリセットするよりも使用することをお勧めします。キャンバスをクリアする方法が重要

ライブデモ

var clearBut = document.getElementById("clearCan"),
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


canvas.width = canvas.height = 300;
ctx.fillRect(10,10,280,280);


function clearCanvas(){
    ctx.clearRect(0,0,canvas.width, canvas.height);        
}

clearBut.addEventListener("click", clearCanvas);

</p>

于 2012-10-19T14:25:32.177 に答える
0

正しいキャンバスをクリアしているかどうかを確認しましたか? より多くのコードを提供していただければ、さらに支援できるかもしれません。

また、クリア後は上書きしないように注意してください。

ただし、キャンバスをクリアする場合、これが私が知っている最も簡単な方法です。

function clear_canvas( canvas ){
    canvas.width = canvas.width;
}

しかし、あなたも使うことができます

function clear_canvas (ctx, canvas){
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
}
于 2012-10-20T16:45:36.940 に答える
0

から;

再描画のためにキャンバスをクリアする方法

// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
ctx.restore();
于 2014-10-18T00:21:52.550 に答える